Beautifully designed components built with Radix UI and Tailwind CSS.
// Install shadcn components npx shadcn-ui@latest init // Add a component npx shadcn-ui@latest add button
A collection of beautifully designed components that you can copy and paste into your apps.
Components are designed to be easily copied and pasted into your applications without any complicated setup.
Components are styled using Tailwind CSS and fully customizable to match your brand's color scheme.
Accelerate your development workflow with ready-to-use components that are easy to implement.
Components are built with accessibility in mind, using ARIA attributes and keyboard navigation.
Clean, minimal components that follow modern design principles and practices.
Easily extend and modify components to fit your specific requirements and design vision.
Beautifully designed and accessible UI components built with Radix UI and Tailwind CSS.
// Button component usage <Button variant="default">Primary</Button> <Button variant="outline">Secondary</Button> <Button variant="secondary">Tertiary</Button>
Are you sure you want to continue with this action?
// Dialog component usage <Dialog> <DialogTrigger>Open</DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Confirm action</DialogTitle> </DialogHeader> <DialogFooter> <Button>Confirm</Button> </DialogFooter> </DialogContent> </Dialog>
// Form component usage <Input placeholder="Email" /> <Select> <SelectValue placeholder="Select" /> <SelectContent> <SelectItem value="1">Option 1</SelectItem> </SelectContent> </Select>
This is a card component that can be used to display content in a contained format.
// Card component usage <Card> <CardHeader> <CardTitle>Card Title</CardTitle> </CardHeader> <CardContent> Card content goes here </CardContent> <CardFooter> <Button variant="link">Learn more →</Button> </CardFooter> </Card>
Over 40+ components available and growing
Get up and running with shadcn components in just a few simple steps.
npx create-next-app@latest my-app --typescript --tailwind --eslint
npx shadcn-ui@latest init
This will add the necessary dependencies and configure your project.
npx shadcn-ui@latest add button npx shadcn-ui@latest add dropdown-menu npx shadcn-ui@latest add card
You can add any component you need with the CLI.
import { Button } from "@/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}
Unlike traditional component libraries, shadcn gives you the actual code. This means you have full control over the components and can customize them to match your design system.
See how developers are building beautiful interfaces with shadcn components.
A beautifully designed admin dashboard with shadcn components, Next.js and Tailwind CSS.
A sophisticated email client built with shadcn components featuring dark mode support.
A minimalist task management application with drag-and-drop functionality using shadcn components.
Join the growing list of projects built with shadcn components
With shadcn components, you can focus on building your application without worrying about the UI details.
Get Startednpx shadcn-ui@latest init
Hear from the community of developers who are building beautiful interfaces with shadcn components.
shadcn components have completely transformed my workflow. The flexibility and design quality are unmatched. I can build beautiful UIs in a fraction of the time it used to take.
Senior Developer at TechCorp
What I love most about shadcn is the source code access. Unlike other component libraries, I can customize everything to my exact specifications while maintaining accessibility.
UX Engineer at DesignStudio
The code quality of shadcn components is exceptional. Each component is well thought out, accessible, and easy to integrate. It's now my go-to for all new projects.
Freelance Developer
I've tried many component libraries, but shadcn stands out with its blend of flexibility and design consistency. The copy-paste approach means I always have full control.
Frontend Lead at Startup
The themability of shadcn components is incredible. I can adapt them to any brand identity without fighting against opinionated styles. A true game changer.
UI Developer at Agency
shadcn's components have become the foundation of our design system. The elegance and flexibility they provide has improved our development speed by 40%.
CTO at ScaleWorks
Comprehensive guides and resources to help you build beautiful interfaces with shadcn components.
shadcn offers a collection of reusable components built using Radix UI and Tailwind CSS. These components are not part of a traditional component library, but rather a collection of code that you can copy and paste into your projects.
Unlike most component libraries, shadcn doesn't publish any packages to npm. Instead, you copy and paste the code into your project and have full control over it.
shadcn components are designed to be copied directly into your project. You can use the CLI to add components or manually copy the code from the documentation. This approach gives you complete ownership of the code.
# Add components using the CLI
npx shadcn-ui@latest add button
npx shadcn-ui@latest add dialog
npx shadcn-ui@latest add card
Each component follows a consistent pattern, making it easy to understand and customize:
Components use class-variance-authority (cva) to define variants, making it easy to create different visual styles for each component.
Components are designed to be composed together to create complex UIs while maintaining a clean API.
Built on top of Radix UI primitives, ensuring accessibility features like keyboard navigation and ARIA attributes.
Every component can be customized using your project's Tailwind CSS configuration.
Connect with the shadcn community to get help, share your work, and contribute to the ecosystem.
Join our Discord server to get help, share your projects, and chat with other community members in real-time.
Star the repository, contribute to the codebase, report issues, or browse the source code on GitHub.
Follow @shadcn on Twitter for the latest updates, announcements, and to showcase your work with the community.
2 days ago
Just launched my portfolio using shadcn components. The design system is so clean and customizable!
1 week ago
I created a custom dark mode theme for the components. Check out my GitHub repo for the implementation!
We welcome contributions from the community. Help us improve shadcn components by contributing code, documentation, or feedback.
Contribute on GitHubGet notified about new components, features, and updates.