shadcn/ui components

Free

Re-usable Radix UI components with Tailwind CSS

shadcn/ui components Image 1
Details About shadcn/ui components
Key points:
  • Responsive Design
  • Tailwind CSS v3.0+
  • Copy & Paste
  • JavaScript Plugin
  • Figma design file
  • Open Source
  • Custom color palette
  • Documentation
  • Dark mode
  • Install via npm

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

shadcn/ui Card cComponent
  • 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
shadcn/ui components in Figma

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.

Is shadcn/ui components free to use?

Yes, shadcn/ui components is an open-source library and is available for free.

Do I need to know Tailwind CSS to use these components?

While basic knowledge of Tailwind CSS is helpful, the components come with detailed documentation to assist users of all skill levels.

Can I use shadcn/ui components in commercial projects?

Yes, shadcn/ui components can be used in both personal and commercial projects without any restrictions.

Featured Tailwind Components

Discover the most popular Tailwind CSS ui components and elements. Browse top-notch Tailwind components to enhance your development process.

Preline UI HOT

Open-source set of prebuilt UI components based on the utility-first Tailwind CSS.