shadcn/ui gives you beautifully designed, ready-to-use React components that you copy into your project and own completely. Not a library you install — a collection of professional UI pieces you can customize however you want. This guide covers everything you need to know.
shadcn/ui is a collection of beautifully designed UI components for React and Next.js. But here is what makes it different from other component libraries: you do not install it as a package. Instead, you copy the component code directly into your project. You own it. You can change anything you want.
Think of it like buying furniture from a store versus getting furniture blueprints. Most component libraries are like pre-built furniture — you get what you get, and customizing is hard. shadcn/ui gives you the blueprints. The furniture shows up in your house, and you can repaint it, resize it, or rebuild it however you like.
Under the hood, shadcn/ui is built on two things: Radix UI (which handles accessibility and behavior — making sure buttons, menus, and dialogs work correctly for everyone) and Tailwind CSS (which handles the styling). This means every component looks great and works properly out of the box.
shadcn/ui has become the go-to component system for the React ecosystem. Tools like v0 by Vercel generate shadcn/ui components by default, and most AI coding tools understand it perfectly.
If your project uses React (which most AI tools generate), shadcn/ui gives you professional components without designing from scratch.
Instead of spending hours styling buttons, forms, and dialogs, grab a shadcn/ui component and it already looks professional.
Unlike libraries where you fight the defaults, shadcn/ui components live in your code. Tell your AI tool to change anything and it can.
Start with shadcn/ui as a foundation, then customize colors, sizes, and styles to match your brand. It is the perfect starting point.
Pricing: shadcn/ui is completely free and open source. Every component is free to use in personal and commercial projects. No paid tiers, no premium components.
shadcn/ui works with React-based projects. If your AI tool created a Next.js or React app, you are good to go. Most AI tools set this up automatically.
Ask your AI tool: 'Initialize shadcn/ui in this project.' It will run the setup command that configures your project to use shadcn/ui components.
Each component is added individually. Tell your AI: 'Add the shadcn Button, Card, and Dialog components.' They get copied into a components/ui folder in your project.
Import and use the components like any other React component. Your AI tool handles this automatically when you describe what you want to build.
Change colors, sizes, roundness, and styles by editing the component files or your global CSS variables. Ask your AI: 'Change the shadcn theme colors to match my brand.'
Buttons, cards, dialogs, tables, forms, dropdown menus, tabs, toasts, tooltips, and many more. Everything you need for a professional app.
Components live in your project, not in a package you cannot see. Change anything — colors, sizes, behavior, animations. No fighting with library defaults.
Built on Radix UI primitives, every component works with keyboards, screen readers, and assistive technologies. Accessibility is handled for you.
Every component supports light and dark mode out of the box. Toggle your theme and everything adapts automatically.
All styling uses Tailwind CSS, which means your AI tool can easily modify the look of any component. No proprietary styling system to learn.
A command-line tool that adds components to your project with one command. Your AI tool runs these commands for you automatically.
Change your entire app's look by modifying a few CSS variables. Go from a blue theme to a green theme in seconds. Multiple pre-built themes available.
Works beautifully with React Hook Form and Zod for form validation. Your AI tool can set up professional forms with error handling in minutes.
A powerful data table component with sorting, filtering, pagination, and row selection. Perfect for dashboards and admin panels.
Built-in chart components for line charts, bar charts, area charts, and more. Add data visualization to your app without extra libraries.
Copy these prompts into your AI tool. They work great in Cursor, Claude Code, Bolt, v0, and other tools that support React.
1. Set up shadcn/ui in your project
"Initialize shadcn/ui in this project. Set up the configuration, install the required dependencies, and add the Button, Card, Input, and Dialog components. Use the default theme with the 'new-york' style."
2. Build a form with validation
"Create a contact form using shadcn/ui form components, React Hook Form, and Zod for validation. Include fields for name (required), email (required, valid email), phone (optional), and message (required, min 10 characters). Show inline error messages below each field. Add a submit button that shows a loading spinner while submitting."
3. Create a data table
"Build a data table using shadcn/ui Table component to display a list of users. Include columns for name, email, role, and status. Add sorting by clicking column headers, a search input to filter by name, pagination showing 10 rows per page, and a status badge that shows green for 'active' and gray for 'inactive'."
4. Build a dialog (popup)
"Create a confirmation dialog using shadcn/ui Dialog component. It should open when a 'Delete' button is clicked, show a warning message asking the user to confirm, and have 'Cancel' and 'Delete' buttons. The delete button should be red. Close the dialog when either button is clicked."
5. Create a navigation menu
"Build a responsive navigation header using shadcn/ui components. Include a logo on the left, navigation links in the center using NavigationMenu with dropdown submenus, and a user avatar with a DropdownMenu on the right showing profile, settings, and logout options. On mobile, use a Sheet component as a slide-out menu."
6. Build a dashboard layout
"Create a dashboard page using shadcn/ui components. Include 4 stat cards at the top showing key metrics with icons, a line chart showing weekly trends, and a recent activity table below. Use the Card component for each section and the Tabs component to switch between 'Overview' and 'Analytics' views."
7. Create a settings page
"Build a settings page using shadcn/ui. Use Tabs to organize settings into 'Profile', 'Account', and 'Notifications' sections. Profile: name and bio inputs with avatar upload. Account: email and password change forms. Notifications: toggle switches for different notification types using the Switch component."
8. Customize the theme
"Change the shadcn/ui theme to use a custom color palette. Set the primary color to a deep purple (#7c3aed), use warm gray for neutral tones, and set the border radius to 12px for a softer look. Update both the light and dark mode CSS variables."
9. Add toast notifications
"Set up toast notifications using shadcn/ui Toaster component. Show a success toast when a form is submitted, an error toast when something fails, and an info toast with an undo button for delete actions. Position toasts in the bottom-right corner."
10. Build a command palette
"Create a command palette (Cmd+K) using shadcn/ui Command component. Include sections for 'Pages', 'Settings', and 'Actions'. Each item should have an icon and label. Typing in the search bar should filter items instantly. Selecting an item navigates to that page or triggers that action."
Do not add all 40+ components at once. Add them as you need them. Each component is a file in your project, so keeping it lean means less to maintain.
Before tweaking individual components, set your brand colors in the CSS variables file (usually globals.css). This changes the look of all components at once.
Every component on ui.shadcn.com has live examples and code. Use these as a reference when telling your AI tool what you want.
shadcn/ui offers two styles: 'default' and 'new-york'. The new-york style looks more polished with smaller borders and cleaner spacing. Most modern projects prefer it.
shadcn/ui is just React components. You can mix them with any other React library — data fetching, animation, state management. They are not locked in.
The init and add commands can be tricky. Let your AI tool run them for you. Just say what components you want and it will handle the installation.
Make sure your Tailwind CSS is configured correctly and your globals.css file includes the shadcn/ui CSS variables. Ask your AI tool: 'Check if shadcn/ui is properly initialized and fix any missing styles.'
The init command needs a supported framework (Next.js, Vite, Remix, etc.). Make sure you are running it from your project root. Ask your AI: 'Initialize shadcn/ui step by step and fix any errors.'
Check that the component file was added to your components/ui folder. Make sure the import path matches your project structure. The default path is '@/components/ui/button' (lowercase).
shadcn/ui uses CSS variables for theming. Both light and dark mode colors must be defined in your globals.css. Ask your AI: 'Fix the dark mode colors in my shadcn/ui theme so all components display correctly.'
Form components require React Hook Form and Zod to be installed. Ask your AI: 'Install react-hook-form, zod, and @hookform/resolvers, then set up the shadcn Form component correctly.'
shadcn/ui components use Tailwind utility classes. If you have custom CSS that targets similar elements, it can conflict. Use more specific selectors or remove conflicting custom styles.
Wondering how shadcn/ui compares to other component libraries? Here is how they stack up.
Material UI is a full component library you install as a package. It follows Google's Material Design system, so everything looks 'Google-like.' shadcn/ui gives you more design freedom since you own the code and can style components however you want. MUI is harder to customize deeply.
Chakra UI is another popular React component library with great accessibility. It uses its own styling system (props-based), while shadcn/ui uses Tailwind CSS. If your project already uses Tailwind, shadcn/ui fits in more naturally. Chakra is easier if you prefer styling through component props.
Mantine is a feature-rich React library with 100+ components and hooks. It includes more out of the box (date pickers, rich text editors, etc.). shadcn/ui has fewer components but gives you complete ownership of the code. Mantine is great for getting more features quickly; shadcn/ui is better for total control.
Ant Design is an enterprise-focused React library from Alibaba. It is packed with complex components for admin panels and business apps. It has a distinct visual style that is hard to override. shadcn/ui is more flexible visually and lighter in weight, but Ant Design has more specialized enterprise components.
