shadcn/ui

What Is shadcn/ui?

shadcn/ui is a collection of re-usable React components built with Radix UI primitives and styled with Tailwind CSS. Created by shadcn (Shadid Haque), it takes a fundamentally different approach from traditional component libraries: instead of installing a package, components are copied into the project, giving developers full ownership and control over the code.

Copy-Paste Philosophy

Unlike npm packages where component code is hidden in node_modules, shadcn/ui components are added to the project's source code through a CLI tool. Running npx shadcn-ui add button copies the Button component source into the project. Developers can then modify the code freely without forking a library or fighting abstraction layers.

This approach means there are no version conflicts, no breaking changes from dependency updates, and no constraints on customization. The component code is project code, maintained alongside everything else.

Built on Radix UI

Components use Radix UI primitives for behavior, accessibility, and interaction logic. Radix provides unstyled, accessible primitives for dialogs, popovers, dropdowns, tabs, accordions, and more. shadcn/ui adds Tailwind CSS styling and sensible defaults on top of these primitives.

Tailwind CSS Styling

All components use Tailwind CSS utility classes for styling, integrating naturally into Tailwind-based projects. A CSS variables-based theming system enables global theme changes including dark mode with minimal configuration.

Component Collection

The collection includes buttons, inputs, selects, checkboxes, switches, sliders, cards, dialogs, sheets, popovers, tooltips, navigation menus, command palettes, data tables, calendars, date pickers, forms, and more. New components are added regularly.

Why Choose shadcn/ui

React developers using Tailwind CSS who want full control over their component code choose shadcn/ui. The copy-paste approach eliminates dependency management overhead while providing a consistent, accessible component foundation.