13 ms·

Precedent – Building Blocks for Next.js

53 points by steventey 4y ago

rajangdavis 4y ago
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.
- steventey 4y ago
  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 https://github.com/steven-tey/precedent" ```
super256 4y ago
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/shared/modal.tsx https://github.com/steven-tey/precedent/blob/main/components... [2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#examples https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...
- kylemh 4y ago
  https://www.oidaisdes.org/native-dialog-element.en/ https://www.oidaisdes.org/native-dialog-element.en/ covers it pretty well. it's not accessible... yet!
- brundolf 4y ago
  The native <dialog> does very little on its own in terms of functionality. It's mainly there for accessibility/semantic markup
ushakov 4y ago
Only 3 components?
- ch71r22 4y ago
  I think they're just bundling Radix UI: https://www.radix-ui.com/ https://www.radix-ui.com/
  - steventey 4y ago
    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!
moneywoes 4y ago
Looking to learn and build a react app, should I start with this? Did review some html css prior.
- smt88 4y ago
  Ant Design is phenomenal, mature, and fully featured. I highly recommend it instead of this.
  - moneywoes 4y ago
    Is it better than Tailwind UI?
    - smt88 4y ago
      I despise flat/Material design and Tailwind's entire philosophy, so I would say "yes"
  - crucialfelix 4y ago
    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.
    - smt88 4y ago
      > 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 https://ant.design/docs/react/customize-theme
      - nwienert 4y ago
        Tamagui gets you Chakra-like features with even better theming, performance and works on Native to boot.
bottlepalm 4y ago
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.
puppycodes 4y ago
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 ;)
- steventey 4y ago
  The z-index issues with the components have been fixed: https://github.com/steven-tey/precedent/issues/2 https://github.com/steven-tey/precedent/issues/2 Sorry about that!
thrownblown 4y ago
Popover drop-down is broken in mobile chrome on Android unless I request the desktop site.
- steventey 4y ago
  This has been fixed! https://github.com/steven-tey/precedent/issues/2#issuecomment-1382617245 https://github.com/steven-tey/precedent/issues/2#issuecommen...
brap 4y ago
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.
- steventey 4y ago
  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
yawnxyz 4y ago
Is that number in the green circle just counting down way into the negative numbers for anyone else?
- steventey 4y ago
  oooh yeah that was a bug, it should be fixed now tho!
AirMax98 4y ago
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/use-intersection-observer.ts#L38 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/use-local-storage.ts#L3 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/use-scroll.ts#L3 https://github.com/steven-tey/precedent/blob/main/lib/hooks/... (you probably want debounce/throttle options here)
- taspeotis 4y ago
  The front page is broken on Edge? https://i.imgur.com/kNOcEtB.gif https://i.imgur.com/kNOcEtB.gif
- steventey 4y ago
  The z-index issues with the components have been fixed: https://github.com/steven-tey/precedent/issues/2#issuecomment-1382617245 https://github.com/steven-tey/precedent/issues/2#issuecommen... Appreciate the feedback about the functions – will get those fixed as well!
Alifatisk 4y ago
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
- searchableguy 4y ago
  https://vercel.com/design/introduction https://vercel.com/design/introduction They hired evilrabbit and now show geist ui on their own site.
  - Alifatisk 4y ago
    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?
solarkraft 4y ago
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
ndstephens 4y ago
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
- steventey 4y ago
  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!
reducesuffering 4y ago
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/
nsonha 4y ago
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?
- DangitBobby 4y ago
  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.
  - nsonha 4y ago
    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.
    - DangitBobby 4y ago
      Ok

53 points by steventey 4y ago

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.

steventey 4y ago
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 https://github.com/steven-tey/precedent" ```

super256 4y ago

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/shared/modal.tsx https://github.com/steven-tey/precedent/blob/main/components... [2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#examples https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

kylemh 4y ago
https://www.oidaisdes.org/native-dialog-element.en/ https://www.oidaisdes.org/native-dialog-element.en/ covers it pretty well. it's not accessible... yet!
brundolf 4y ago
The native <dialog> does very little on its own in terms of functionality. It's mainly there for accessibility/semantic markup

ushakov 4y ago

Only 3 components?

ch71r22 4y ago
I think they're just bundling Radix UI: https://www.radix-ui.com/ https://www.radix-ui.com/
- steventey 4y ago
  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!

moneywoes 4y ago

Looking to learn and build a react app, should I start with this? Did review some html css prior.

smt88 4y ago
Ant Design is phenomenal, mature, and fully featured. I highly recommend it instead of this.
- moneywoes 4y ago
  Is it better than Tailwind UI?
  - smt88 4y ago
    I despise flat/Material design and Tailwind's entire philosophy, so I would say "yes"
- crucialfelix 4y ago
  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.
  - smt88 4y ago
    > 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 https://ant.design/docs/react/customize-theme
    - nwienert 4y ago
      Tamagui gets you Chakra-like features with even better theming, performance and works on Native to boot.

bottlepalm 4y ago

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.

puppycodes 4y ago

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 ;)

steventey 4y ago
The z-index issues with the components have been fixed: https://github.com/steven-tey/precedent/issues/2 https://github.com/steven-tey/precedent/issues/2 Sorry about that!

thrownblown 4y ago

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

steventey 4y ago
This has been fixed! https://github.com/steven-tey/precedent/issues/2#issuecomment-1382617245 https://github.com/steven-tey/precedent/issues/2#issuecommen...

brap 4y ago

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.

steventey 4y ago
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

yawnxyz 4y ago

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

steventey 4y ago
oooh yeah that was a bug, it should be fixed now tho!

AirMax98 4y ago

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/use-intersection-observer.ts#L38 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/use-local-storage.ts#L3 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/use-scroll.ts#L3 https://github.com/steven-tey/precedent/blob/main/lib/hooks/... (you probably want debounce/throttle options here)

taspeotis 4y ago
The front page is broken on Edge? https://i.imgur.com/kNOcEtB.gif https://i.imgur.com/kNOcEtB.gif
steventey 4y ago
The z-index issues with the components have been fixed: https://github.com/steven-tey/precedent/issues/2#issuecomment-1382617245 https://github.com/steven-tey/precedent/issues/2#issuecommen... Appreciate the feedback about the functions – will get those fixed as well!

Alifatisk 4y ago

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

searchableguy 4y ago
https://vercel.com/design/introduction https://vercel.com/design/introduction They hired evilrabbit and now show geist ui on their own site.
- Alifatisk 4y ago
  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?

solarkraft 4y ago

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

ndstephens 4y ago

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

steventey 4y ago
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!

reducesuffering 4y ago

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/

nsonha 4y ago

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?

DangitBobby 4y ago
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.
- nsonha 4y ago
  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.
  - DangitBobby 4y ago
    Ok