Precedent – Building Blocks for Next.js | Hacker News Reader

Precedent – Building Blocks for Next.js

precedent.vercel.app

53 pointssteventey48 comments

2/3 of these components are broken on iOS safari. I also see some questionable things happening in the hooks that might not make it past a review.

It's a good start, but definitely keep it up.

[1] — https://github.com/steven-tey/precedent/blob/main/lib/hooks/... (you don't need the ref if you are ignoring exhaustive-deps, not sure why you stringify threshold)

[2] - https://github.com/steven-tey/precedent/blob/main/lib/hooks/... (you maybe want to check if a key exists and warn before you set it)

[3] - https://github.com/steven-tey/precedent/blob/main/lib/hooks/... (you probably want debounce/throttle options here)

The front page is broken on Edge?

https://i.imgur.com/kNOcEtB.gif

The z-index issues with the components have been fixed: https://github.com/steven-tey/precedent/issues/2#issuecommen...

Appreciate the feedback about the functions – will get those fixed as well!

Looks cool but im always discouraged by any UI kit that isn't optimized for mobile devices in their demo elements on the front page. Might wanna check the experience on iOS safari ;)

The z-index issues with the components have been fixed: https://github.com/steven-tey/precedent/issues/2

Sorry about that!

I've checked out the <Modal /> component [1]. What's the reason to go through so many hoops instead of just using the HTML native <dialog> element [2]?

[1] https://github.com/steven-tey/precedent/blob/main/components...

[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

https://www.oidaisdes.org/native-dialog-element.en/

covers it pretty well.

it's not accessible... yet!

The native <dialog> does very little on its own in terms of functionality. It's mainly there for accessibility/semantic markup

I'm waiting for the UI library that also animates everything out that it animates in. I know why people don't do it (it's annoying to do in React), but this gross lack of attention to detail in even the biggest-name software really bothers me. The UX sucks. If you're not going to animate it out, just skip animating it in to at least be consistent!

This isn't meant to be a dig at this specific library* (it's certainly no worse than others and you probably did a great job!), but rather the general state of React UI development.

*however this library already uses Framer Motion, which makes such things much easier

Curious why you went with RadixUI over HeadlessUI? Not that you shouldn't, just wondering what your decision process was.

I also noticed in `_app.tsx` that you wrapped <Component /> in a <main> element. Wouldn't that wrap the entire app within main tags? I think that kind of throws off the normal flow of accessible landmarks.

I really like the template so far. Might add a few aspects of it to my own. Thanks for sharing

AFAIK Radix has better a11y support than HeadlessUI, which is why I went with that!

As for the second point – I'm actually not quite sure if there are any downsides/tradeoffs to that. What do you mean by accessible landmarks in this case? a11y?

Glad you like the template!

I think this is pretty neat, my only feedback is that I'd like to see documentation on how to incorporate with an existing or new Next.js project.

Thanks! It's not meant to be integrated with an existing project, though you can copy some of the components over if you'd like!

To use it to bootstrap a new project, you can run:

``` npx create-next-app precedent --example "https://github.com/steven-tey/precedent" ```

Popover drop-down is broken in mobile chrome on Android unless I request the desktop site.

This has been fixed!

https://github.com/steven-tey/precedent/issues/2#issuecommen...

Since this is for your and other peoples' new projects, I'd rather recommend you use the app/ in Next 13 rather than pages. I'm told Vercel themselves are doing most new things in app/

I already don't wanna use it when I see api like 'useLocalStorage', when does this end the spreading of this garbage hook thing? What does local storage have anything to do with render cycle?

It's pretty simple, conceptually. It's like useState but saves state in localStorage. It has exactly the same stuff to do with the render cycle as useState.

no? You wanna duplicate local storage as a state in memory, and doing that you create some unnecessary hook that does the read write assuming re-renders. So now your codebase will have 2 different ways of doing localStorage, the normal, predictable way, when re-rendering isn't needed and the hook way.

I love Vercels design, I remember reading on their discussion page that they were working on open-sourcing their components and design system, but that was about two years ago?

Now the closest thing we have is geist-ui.dev

https://vercel.com/design/introduction

They hired evilrabbit and now show geist ui on their own site.

That's so cool, I didn't know they updated that page as well. But it still says their components are internal, which is sad.

Is geist-ui 1-to-1 copy of Vercels?

I’m already using most of this stack except for Radix, anyone know how it compares to MUI?

Surprised they didn’t include a query library. I like the idea of tRPC, but would like to use it on any REST style url.

This seems kinda weird. Random UI components, ORM, and string formatting utilities(???) all part of the same “thing”? I don’t get what this is, seems like a mishmash.

Hey! OP here – this is meant to be a powerful hello-world template that you can clone when you start a new Next.js project, something that I built for myself because I start way too many side projects haha

Is that number in the green circle just counting down way into the negative numbers for anyone else?

oooh yeah that was a bug, it should be fixed now tho!

Looking to learn and build a react app, should I start with this?

Did review some html css prior.

Ant Design is phenomenal, mature, and fully featured. I highly recommend it instead of this.

Is it better than Tailwind UI?

I despise flat/Material design and Tailwind's entire philosophy, so I would say "yes"

But it's very hard to not look like Ant. Some of the components are great though.

Chakra is easy to design with, and fully accessible. Well thought out.

> But it's very hard to not look like Ant.

I don't know why this matters. Users certainly don't notice or care. Worrying about it early in the development cycle is a waste of time.

They also have general theming to allow you to quickly get it to look like your brand's colors: https://ant.design/docs/react/customize-theme

Tamagui gets you Chakra-like features with even better theming, performance and works on Native to boot.

Users may or may not care, but Product Managers and designers definitely do.

FWIW I added css that overrode ant's. It was the simplest and easiest way. It was a step progress component

and if this matters at all, the documentation is not that great, IMO. It suffers from some translation issues and isn't always very clear.

I also audited their code quite a few times, and they do some very bizarre things in the name of "performance" under the hood.

I've never had issues with the docs.

The under-the-hood stuff also has never bitten me and that's exactly what I want an isolated, composable component to do for me anyway. Performance is excellent.

If you want to learn, my advice would be to focus on learning one thing at a time. Pick up react. Just react. NextJS (and other libraries included here) solve specific problems in specific ways. It's hard to know if they solve them in the way that works for you if you don't understand the problem they are solving, or what other approaches might look like.

Once you're comfortable with how react works, then start layering in additional libraries and tools, and get a feel for how they work. You may also find they introduce new pain points that don't work for your particular project. When you're trying to learn everything all at once, it's hard to figure out where a pain point is even coming from.

Totally disagree. Trying to fully understand a stack this tall from the get-go would be a huge barrier

One of the best things about Next is that it configures everything for you and lets you just start writing some React code and seeing results. I would recommend the GP start with Next, and dig deeper as they go along

Agreed. React by itself is mostly unusable for building anything – although that is slowly changing but alas: NextJS gives you a more solid starting point to build stuff around React.

Precedent seems a little half-hearted at this point.

I highly recommend learning Next.js as a way to learn React – it is built on top of React and focuses on some of the most important hooks (useState, useEffect) while also giving you functions for server-side rendering that help make sure your app is performant from the get-go.

That's actually how I learned React myself :)

Disclaimer: I work at Vercel (we maintain Next.js)

Any courses you suggest? Was looking at frontend masters

Also tailwindui or mui or ant?

Do the official Next.js tutorial [0]. Tailwindcss yes, TailwindUI are paid components. Not mui.

[0] https://nextjs.org/learn/foundations/about-nextjs?utm_source...

MUI is fine but I wouldn't use it until you have some experience.

Only 3 components?

I think they're just bundling Radix UI: https://www.radix-ui.com/

Hey! OP here – this is not meant to be a design / component system, though I plan to add more components to it in the future if it makes sense. Rather, it's meant to be a powerful hello-world template that you can clone when you start a new Next.js project.

Highly recommend Radix if you want more components!

Reply on news.ycombinator.com