Build your component library
Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.
Features
These components are built using Radix UI and styled with Tailwind CSS.
Styles
Beautiful, thought-out styles using modern CSS features.
Components
Accessible and customizable components.
Hooks & Utils
Useful hooks and utility functions.
Theming
Built with CSS variables for easy theming.
Copy & Paste
Copy and paste the code into your apps.
Open Source
Free and open-source components.
Components
Copy and paste beautiful components. Built with Radix UI and Tailwind CSS.
Accordion
Calendar
June 2023
Card
Create project
Deploy your new project in one-click.
Hover Card
@shadcn
Design. Code. Create.
Installation
Install the CLI and run the init command to get started.
npx shadcn-ui@latest inithttps://ui.shadcn.com/docs/installationDocumentation
Every component comes with comprehensive documentation and usage examples.
Examples
Check out some examples of what you can build with shadcn/ui components.
Email client interface with sidebar navigation and email preview.
Dashboard
Analytics dashboard with charts, graphs and data tables.
Tasks
Task management app with calendar and team collaboration.
Playground
Component playground for testing and previewing components.
Music
Music player interface with playlist and audio controls.
Authentication
Authentication forms with validation and error handling.
Themes
Customizable themes using CSS variables. Style your components with any design system.
Light
Dark
Rose
Blue
Green
Orange
Community
Join our community and get help, share your work, and connect with other developers.