shadcn/ui components

Introduction

shadcn/ui is NOT a component library. It's a collection of reusable components that you can copy and paste into your apps.

Features

Customizable Radix UI components for your apps that are not only easily accessible but also open-source and ready to use.

Pre-built themes to copy and paste into your CSS file

Easy customization
Pre-designed components
Accessible and inclusive
Consistent styling
Modern design patterns
Lightweight and fast
Regular updates
Detailed documentation

Components

Accordion
Alert
Alert Dialog
Aspect Ratio
Avatar
Badge
Breadcrumb (New)
Button
Calendar
Card
Carousel
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Form
Hover Card
Input
Input OTP (New)
Label
Menubar
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Sheet
Skeleton
Slider
Sonner
Switch
Table
Tabs
Textarea
Toast
Toggle
Toggle Group
Tooltip

Pros and Cons

Pros ✅

50+ re-usable components available
.figma file also available
shadcn/ui introduced Blocks recently along with Lift Mode feature
Built-in dark mode support for Next.js, Vite, Astro and Remix
Easy install for Next.js, Vite, Remix, Gatsby, Astro, Laravel and React frameworks

Cons ⛔️

Requires basic understanding of TypeScript and Radix UI

FAQ

Do I have to be familiar with Radix UI and Next.js?

Familiarity with Radix UI and Next.js can be beneficial but is not strictly necessary; the components are designed to be adaptable to various frameworks and setups.