shadcn/ui: Customizable React component library
Copy-paste React components built on Radix and Tailwind.
Learn more about shadcn/ui
shadcn/ui is a React component library that provides a curated set of UI components built on top of Radix UI primitives and styled with Tailwind CSS. Components are distributed as source code that developers copy directly into their projects, allowing for full customization and control over the implementation. The architecture emphasizes composition and extensibility, with each component designed as a starting point rather than a locked-in solution. Common use cases include bootstrapping design systems, building application-specific component libraries, and rapid prototyping of interfaces in Next.js and React projects.
Copy-Paste Component Distribution
Components install as source code directly into your project instead of npm dependencies. Provides full access to component internals for modification without version lock-in or upgrade conflicts.
Radix UI Foundation
Built on Radix primitives with accessibility logic, ARIA attributes, and keyboard navigation pre-implemented. Separates structural concerns from styling, letting you customize appearance while maintaining standards compliance.
Tailwind CSS Styling
Uses utility classes that integrate with existing Tailwind configurations. Customize components by modifying classes directly or extending your design tokens without learning component-specific styling APIs.
import { Button } from "@/components/ui/button"
export function LoginForm() {
return (
<div>
<Button variant="default">Sign In</Button>
<Button variant="outline">Cancel</Button>
</div>
)
}Remove restricted blocks functionality.
- –remove restricted blocks
Use tw-merge to handle transform-style properties.
- –use tw-merge to transform-style
Update migrate radix command functionality.
- –update migrate radix command
See how people are using shadcn/ui
Top in Frontend
Related Repositories
Discover similar tools and frameworks used by developers
Angular Components
Material Design components and utilities for Angular applications.
Redux
JavaScript library for predictable global state management using a single store and pure functions.
TanStack Query
Declarative server-state caching with automatic background synchronization.
RemixIcon
3100+ neutral-style SVG icons in outlined and filled variants.
Astro
Static site generator with selective component hydration.