A collection of modern, accessible and customizable components that you can copy and paste into your apps.
# Using npm
npm install @shadcn/ui
# Using pnpm
pnpm add @shadcn/ui
# Using yarn
yarn add @shadcn/ui
Everything you need to build modern applications
Components are styled using Tailwind CSS and are fully customizable to match your brand
Copy and paste components directly into your projects without any setup required
Every component is fully customizable and themeable to match your design needs
All components follow WAI-ARIA patterns and are keyboard accessible
Built with TypeScript and includes type definitions out of the box
Regular updates and new components added based on community feedback
Ready-to-use components for your next project
This is an alert message
See how components work together in real applications
Admin dashboard with analytics, charts, and data tables
Complete authentication with login, signup, and password reset
Landing page with features and pricing
Product listings and cart functionality
Content management and articles
Everything you need to get started
Install dependencies
npm install @shadcn/uiImport component
import { Button } from "@shadcn/ui/button";Use in your project
export default function App() {
return
}const theme = {
button: {
variants: {
primary: "bg-blue-500 hover:bg-blue-600",
secondary: "bg-gray-500 hover:bg-gray-600"
}
}
}interface ButtonProps {
variant?: 'primary' | 'secondary';
size?: 'sm' | 'md' | 'lg';
children: React.ReactNode;
}Experiment with components in real-time
import { Button } from "@shadcn/ui"
export default function Demo() {
return (
)
}Connect with developers and contribute to the ecosystem
@contributor1
@contributor2
@contributor3
@contributor4
@contributor5
@contributor6