What is shadcn?
shadcn/ui is a collection of reusable components built using Radix UI and Tailwind CSS. It's not a traditional component library, but rather a collection of copy-and-paste components that you can use to build your own component library.
Philosophy
The philosophy behind shadcn/ui is to provide:
- Copy and paste components - Own the code, don't install a dependency
- Customizable - Built to be customized to your needs
- Accessible - Built on top of Radix UI for accessibility
- Beautiful - Thoughtfully designed components
Key Characteristics
1. Not a Library
Unlike traditional component libraries, shadcn/ui components are meant to be copied into your project and customized.
2. Built on Solid Foundations
- Radix UI for accessibility and behavior
- Tailwind CSS for styling
- TypeScript for type safety
3. Highly Customizable
Every component can be modified to fit your design system and requirements.
4. Modern Development Practices
- Uses modern React patterns
- Follows accessibility best practices
- Optimized for performance
Components Available
shadcn/ui provides a wide range of components including:
- Form controls (Button, Input, Select, etc.)
- Navigation (Tabs, Breadcrumb, etc.)
- Feedback (Alert, Toast, etc.)
- Overlays (Modal, Popover, etc.)
- Data display (Table, Card, etc.)
Why Choose shadcn/ui?
- Full Control - You own the code and can modify it as needed
- No Bundle Size Impact - Only include what you use
- Consistent Design - All components follow the same design principles
- Active Community - Large community contributing components and improvements
Getting Started
To start using shadcn/ui in your project, you'll need to set up the CLI and initialize your project configuration.