Using shadcn/ui for components

January 19, 2024

Building apps without a Designer can lead to some pretty poor looking screens (read: Designers are hugely important!). But when working solo, I've often wanted a set of core components that I could use while building out the application logic. I was introduced to shadcn/ui, and find it quite valuable.

Not a Component Library

So technically shadcn/ui is not a component library. But it kinda is. The trick is you "install" the components via a script that adds code to your application. You can then tweak the code as you see fit. But this means that any changes to the original component (in shadcn/ui's source control) won't be reflected in the version that you've already installed.

Really this means that these are component starter kits, that are fairly generic design-wise. It's up to you to add color/behavior/style as you see fit. In previous companies we've used them as just that — starters that the Designers style a bit, and we use that as the component library.

Initial Setup

There's some initial setup that needs to take place before using shadcn/ui. The online documentation does a great job of explaining the process, but essentially it comes down to running this command:

npx shadcn-ui@latest init

Some considerations:

You should be using Tailwind if you aren't already
I prefer to not use CSS variables since this makes integration with Tailwind simpler (IMO)

You might have to tweak some things after the command has run to make sure all the files and directories are pointing to the correct location. I also renamed lib/utils to lib/tailwind-utils to be more specific.

Installing a Component

Installing components is the fun part! Just browse the full list of components available and choose one to install. For example, most people would probably want to import the Button component:

npx shadcn-ui@latest add button

Now browse to components/ui/button.tsx to see the newly created component and tweak to your liking! (One other note: Storybook can be very helpful in demo'ing these components if you aren't already using it.)