shadcn/ui
shadcn/ui
shadcn/ui is a collection of re-usable components built using Radix UI and Tailwind CSS. It provides a set of accessible, customizable, and open-source components that you can copy and paste into your apps.
Initialize shadcn/ui
Initialize shadcn/ui in your project with the CLI setup wizard
npx shadcn-ui@latest init
Add Button Component
Add the Button component to your project
npx shadcn-ui@latest add button
Add Card Component
Add the Card component to your project
npx shadcn-ui@latest add card
Add Dialog Component
Add the Dialog (modal) component to your project
npx shadcn-ui@latest add dialog
Add Input Component
Add the Input component to your project
npx shadcn-ui@latest add input
Add Select Component
Add the Select component to your project
npx shadcn-ui@latest add select
Add Tabs Component
Add the Tabs component to your project
npx shadcn-ui@latest add tabs
Add Toast Component
Add the Toast notification component to your project
npx shadcn-ui@latest add toast
Add Theme Toggle
Add the Dropdown Menu component (commonly used for theme toggles)
npx shadcn-ui@latest add dropdown-menu
Add Form Components
Add the Form components including validation and error handling
npx shadcn-ui@latest add form
Add Data Table
Add the Table component with sorting and pagination capabilities
npx shadcn-ui@latest add table
Add Calendar
Add the Calendar component for date picking and scheduling
npx shadcn-ui@latest add calendar
Add Dropdown Menu Component
Add the Dropdown Menu component to your project
npx shadcn-ui@latest add dropdown-menu
Add Toggle Component
Add the Toggle component to your project
npx shadcn-ui@latest add toggle
Add Tooltip Component
Add the Tooltip component to your project
npx shadcn-ui@latest add tooltip
Add Multiple Components
Add multiple components at once
npx shadcn-ui@latest add button card dialog
Update shadcn/ui
Update shadcn/ui to the latest version
npx shadcn-ui@latest update
List Available Components
List all available components
npx shadcn-ui@latest list