Re-usable components built with Radix UI and Tailwind CSS
Core Idea: Shadcn UI is not a traditional component library but a collection of accessible, customizable React components that you copy into your project rather than install as a dependency.
Key Elements
Core Principles
- Components are copied directly into your project's codebase
- Built with accessibility in mind using Radix UI primitives
- Styled with Tailwind CSS for consistent design language
- Fully customizable since you own the component code
- CLI tool for easy component installation
Component Architecture
- Built on Radix UI's headless component primitives
- Uses React's component composition pattern
- Leverages Tailwind CSS for styling
- Supports light/dark mode with theming system
- Follows modern React best practices (hooks, context)
Available Components
Shadcn UI provides dozens of components, including:
- Layout: Card, Sheet, Dialog, Drawer
- Forms: Input, Select, Checkbox, Radio, Switch
- Data Display: Table, Avatar, Badge, Skeleton
- Navigation: Tabs, Dropdown Menu, Command
- Feedback: Toast, Progress, Alert
- Advanced: Calendar, Date Picker, Command Palette
Implementation Method
# Installation with CLI
npx shadcn-ui@latest init
# Adding components
npx shadcn-ui@latest add button
npx shadcn-ui@latest add dialog
Customization System
Components can be easily customized by:
- Modifying the variants in the component file
- Updating the global theme in your CSS
- Extending the Tailwind config to add custom colors
- Creating new variants by extending existing components
// Example of button component variants
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
// Add custom variants here
custom: "bg-purple-500 text-white hover:bg-purple-600",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
Practical Implementation
Component Usage
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
export function MyComponent() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open Dialog</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
Make changes to your profile here.
</DialogDescription>
</DialogHeader>
{/* Dialog content */}
</DialogContent>
</Dialog>
)
}
Theming and Dark Mode
// In your layout component
<html lang="en" className={theme === 'dark' ? 'dark' : ''}>
/* In your globals.css */
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
/* Other variables... */
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
/* Dark theme variables... */
}
}
Framework Integration
Shadcn UI supports all major React-based frameworks:
- Next.js (both App and Pages Router)
- Vite
- Remix
- Astro
- SvelteKit (with additional setup)
Additional Connections
- Creator: Shadcn (Shaun Wang)
- Built With: Radix UI, Tailwind CSS, React
- Related Concepts: Component-Driven Development, Copy-Paste Libraries
- See Also: Headless UI Components, Tailwind Component Libraries
References
- Official Documentation: https://ui.shadcn.com/
- GitHub Repository: https://github.com/shadcn-ui/ui
- Shaun Wang's Blog: https://www.shadcn.com/