What Makes Shadcn Different
Shadcn UI isn't like other component libraries. Instead of installing packages, you copy and paste code into your project. This means you own everything and can change whatever you want. But you need to know how to customize without messing things up.
How Shadcn Components Work
All shadcn components follow the same pattern. They use Radix UI for the functionality (like keyboard navigation) and Tailwind CSS for styling. Once you understand this, customizing becomes much easier:
Method 1: Change Colors with CSS Variables
The easiest way to customize shadcn is through CSS variables. All the colors are defined as variables, so you can change your entire theme by updating a few values:
Change these variables and your entire app gets a new look. No need to hunt down every component.
Method 2: Create Different Button Styles
Want different button styles? Use class-variance-authority (CVA). This is how shadcn creates variants like "default", "destructive", and "outline" buttons:
Method 3: Add Features Without Breaking Things
Don't mess with the original components. Instead, create new components that use the originals and add your own features:
Method 4: Combine Components to Build Bigger Things
Sometimes you need something more complex than a single component. Combine multiple shadcn components to build forms, cards, and other complex UI:
Pro Tips That Actually Help
Things That Will Save You Time
- Use cn() for merging classes: Don't manually combine Tailwind classes
- Don't break accessibility: Keep ARIA attributes and keyboard navigation
- Test both themes: Make sure your changes work in light AND dark mode
- Keep track of your changes: Document what you've customized
- Don't repeat yourself: Create shared utilities for common customizations
Mistakes That Will Bite You Later
1. Don't hardcode colors: Use CSS variables so you can change themes easily
2. Test on mobile: Your customizations need to work on phones too
3. Don't fight the defaults: If you're overriding everything, maybe you need a different component
Bottom Line
- Change colors with CSS variables
- Create button variants with CVA
- Build new components instead of changing originals
- Combine components to make complex UI
- Keep accessibility and mobile in mind
- Write down what you've changed
The best part about shadcn UI is you're not stuck with their design choices. Use these techniques to make components that match your brand while keeping all the good stuff shadcn gives you.