Button
shadcn/ui DesignAccessible component primitives you own
shadcn/ui gives us a starting point of accessible, unstyled Radix UI components styled with Tailwind CSS — copied into your codebase, not installed as a dependency. We customise every component to match your brand.
shadcn/ui is a collection of accessible, customizable React components built on Radix UI primitives and styled with Tailwind CSS. Unlike traditional component libraries, shadcn/ui copies components directly into your codebase — you own and control every line of code. This approach gives you full customization freedom without fighting library abstractions. Components are accessible by default (via Radix), beautifully styled with Tailwind, and composable — use them as-is or modify them to match your exact design system. The registry system makes adding new components a single CLI command.
Quick start
# Initialize shadcn/ui in your project
npx shadcn@latest init
# Add components
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
# Add multiple components at once
npx shadcn@latest add table form input labelRead the full documentation at ui.shadcn.com/docs
Owns the code
Components are copied into your project — no node_modules dependency, full control to customise anything.
Accessible by default
Built on Radix UI primitives — keyboard navigation, screen reader support, and focus management included.
Tailwind themed
CSS variables and Tailwind utility classes for consistent theming — change your palette in one place.
Dark mode ready
Light and dark themes via CSS variables — toggle with next-themes and every component adapts automatically.
Composable
Compound component patterns — combine primitives like Dialog, Popover, and Command to build complex UIs.
Registry-based
Add components via the CLI from the registry — one command to install, update, or extend any component.
Why it's hard
Component customization overhead
Because you own the code, you're also responsible for maintaining it. Updating components requires manually applying changes from upstream rather than bumping a package version.
Design system consistency
Customizing individual components without a clear design system can lead to inconsistency. Define your theme tokens (colors, spacing, border radius) in CSS variables before customizing components.
Learning Radix UI primitives
shadcn components are built on Radix UI. Understanding Radix's composition model, controlled/uncontrolled patterns, and accessibility features helps when customizing deeply.
Best practices
Use the CLI to add components
npx shadcn@latest add button adds the component with all dependencies — faster and less error-prone than manual copying.
Define your theme in CSS variables
shadcn/ui uses CSS custom properties for theming. Define your brand colors, border radius, and font in globals.css for consistent styling across all components.
Compose complex UI from primitives
Build complex interfaces by composing shadcn primitives (Card, Dialog, Table, Form) — the components are designed to work together.
Frequently asked questions
Related technologies
Related services
Looking for end-to-end delivery? These services complement shadcn/ui projects.
Want to build with shadcn/ui?
Talk to our engineering team about your shadcn/ui architecture. We'll respond within 24 hours.
We limit intake each month so every project gets the focus it deserves.