Development · Website
shadcn/ui
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
shadcn/ui is an open-source collection of accessible, composable UI components designed to be copied directly into your codebase rather than installed as an opaque dependency. Built primarily on Radix UI primitives and styled with Tailwind CSS, it gives developers full ownership and customization of component source code.
What it's for
- Scaffold an accessible design system for modern Next.js or React applications
- Add responsive dialogs and drawers that switch between modal views on desktop and bottom sheets on mobile
- Implement stacked toast notifications using Sonner
- Add paginated tables, carousels, and resizable layout panels via a simple CLI
Features
- Code ownership: copy-paste components directly into your project rather than installing a monolithic npm package
- Built-in CLI to initialize and add individual components on demand
- Tailwind CSS styling with support for custom class prefixes to prevent conflicts in existing codebases
- Accessible foundation using Radix UI primitives and other focused libraries like Vaul and Sonner
- Includes complex patterns like Drawer, Carousel, Sonner toast, Resizable panels, and Pagination
- Dark mode support and adaptable theming variables out of the box
Pricing
Open source. Free, MIT licensed
Details
- Type
- Website
- Category
- Development
- Topic
- UI Components
- Open source
- Yes
- Platforms
- Command line, Code library, Web
- For
- React and Next.js frontend developers building modern web apps
- Alternative to
- Chakra UI, MUI, Ant Design, Mantim UI
- Tags
- react, tailwind, radix ui, nextjs, design system, components
Why it was saved
- @chronark: New ready-made UI components to reuse in product work.
- @shadcn: New building blocks for product interfaces: Drawer (built on Vaul, dialog on desktop / drawer on mobile), Carousel (Embla-based, swipe gestures and keyboard support), Pagination (with previous/next, works with framework Link), Resizable panel groups, and Sonner toasts. The CLI now auto-prefixes Tailwind classes so components can be added to existing projects like Docusaurus, Nextra, or existing design systems without style conflicts.
- @shadcn: Gives a responsive dialog pattern out of the box: a Dialog on desktop and a bottom Drawer on mobile, with drag handles and gesture support.
- @shadcn: This update adds Drawer, Carousel, Pagination, Sonner (toast notifications) and Resizable components, support for a custom Tailwind prefix in the CLI, and previews a new style with framer-motion animations shipping early next year.
- @shadcn: Feature-rich toast library worth pulling into projects: supports stacking of multiple toasts, an inline action button (e.g. "Undo") inside the toast, and smooth expand/collapse animations, as shown in the demo video.
- @shadcn: The Project of the Year; the go-to component toolkit for React + Tailwind.
- @shadcn: A foundational library for building React interfaces; the person builds software products and this is the canonical launch of a widely used component system.
Compare
Related
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Animated React and Tailwind UI components designed for landing pages
Updated