Proposal: Use shadcn UI components

[rajeshg]

shadcn has come up with a set of good UI components that align closely with the current choices of epic-stack.

Refer:

• https://github.com/shadcn/ui
• https://ui.shadcn.com/

At the core, it's nothing but wrappers around Radix UI components with Tailwindcss for styling.

Pros:

• Could remove some of the hassles around starting a new project, which is one of the things epic-stack could help with.
• Comes with theming and complete customizability. We can just pick and choose the radix components to use, just like the radix components in use currently.

Cons:

• Could be a little opinionated for some, but I guess it could be a good one to consider.
• Could add a few more dependencies

[kentcdodds]

Thanks for this! I'm not sure how to apply this though considering shadcn is not a library you can install:

https://ui.shadcn.com/docs

[rajeshg]

shadcn ui has a cli that can help a little here. https://ui.shadcn.com/docs/cli

There is a rewrite in the works, that could improve things a little bit.

The cli was a successful experiment. Going to rewrite it from scratch this weekend.

— shadcn (@shadcn) May 26, 2023

Observations from my attempt to use it.

1. Relies on @ instead of ~ to find paths. We can workaround this by adding "~/*": ["./app/*"] to tsconfig.json
2. Wish that it's a library, so that we don't have to deal with the code like we don't generally modify anything in remix-run or prisma. But on the other hand, it gives full control and anyone can tinker the components

Apart from shadcn ui, the following could also be good options. daisyui - CSS only approach and Adobe React Spectrum

[andrecasal]

I vote for a built-in custom variant of shadcn/ui that uses Radix UI, Zod, and custom Tailwind classes controlled by CSS Variables 👌

[kentcdodds]

Sorry, I still don't know what that would look like since you can't install it. Care to make an example?

[benhsm]

The components are indeed only copy-pasted into projects, but there is a bit of setup that needs to happen for them to be usable; a few utility libraries that need to be installed, one utility helper function, and a design system defined in the tailwind config file and the app's main CSS stylesheet. These are all documented here: https://ui.shadcn.com/docs/installation#manual-installation

I suppose building shadcn/ui into epic-stack would mean making these these configurations part of the default setup so that people could immediately begin copy-pasting shadcn components into the project. The main point of friction for integrating these components are places where the design system they rely on overlaps with the design system that epic-stack is currently built on, so doing so might entail reworking the tailwind theme and many of the classNames in use in the stack. I don't have any opinion at the moment concerning whether or not this would be a good thing to do, but hopefully this helps clarify the changes that have been suggested here.

[kentcdodds]

Thank you for taking the time to explain that @benhsm!

I think once #146 is finished and merged, the path forward will be more obvious.

[andrecasal]

Working on it 😉

[kentcdodds]

After watching this I'm super on board using shadcn https://youtu.be/QJlTWj30krw

I don't think we need to make a preset/plugin. I was just really impressed with the approach shadcn takes and I'd like to follow it.

[kentcdodds]

This is done now #224

[rajeshg]

Thanks for integrating this. The epic stack is shaping up quite well.