shadcn/ui

Language: JavaScript

UI Framework

shadcn/ui was created by Shadcn in 2023 to demonstrate how to build a component library without publishing to npm. Instead of being a dependency, shadcn/ui encourages developers to copy components directly into their codebase. This approach gives teams full control over customization, while leveraging Radix UI for accessibility and Tailwind CSS for styling.

shadcn/ui is a collection of reusable, accessible, and customizable components built with Radix UI and Tailwind CSS. Unlike traditional libraries, it provides copy-and-paste components instead of an npm package.

Installation

npm: shadcn/ui is not available as an npm package. Instead, use the CLI to install components.

yarn: shadcn/ui does not support yarn installation directly.

cdn: No CDN build available. Components must be added locally.

manual:

Run `npx shadcn-ui@latest init` in your project to set up, then use `npx shadcn-ui@latest add <component>` to add specific components.

Usage

shadcn/ui provides prebuilt Radix UI + Tailwind CSS components (like buttons, modals, tables, dropdowns) that you copy into your codebase. Components are fully customizable and extendable, unlike typical UI libraries.

Button component

import { Button } from "@/components/ui/button";

<Button variant="default">Click Me</Button>

Renders a customizable button using Tailwind variants defined in the local button component file.

Dialog (Modal)

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>My Dialog</DialogTitle>
    </DialogHeader>
    <p>Hello from shadcn/ui!</p>
  </DialogContent>
</Dialog>

Implements a modal dialog powered by Radix UI primitives and styled with Tailwind.

Table with sorting

import { Table, TableHeader, TableRow, TableHead, TableCell, TableBody } from "@/components/ui/table";

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Age</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John</TableCell>
      <TableCell>30</TableCell>
    </TableRow>
  </TableBody>
</Table>

Creates a responsive, accessible table with customizable styling.

Dropdown Menu

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Implements a fully accessible dropdown menu styled with Tailwind.

Error Handling

Component import not found: Ensure you ran `npx shadcn-ui add <component>` and that the file exists in `components/ui`.

Tailwind classes not applying: Verify that Tailwind is correctly configured in your project (postcss + tailwind.config.js).

Radix primitives not working: Check that Radix UI packages are installed since shadcn/ui components depend on them.

Best Practices

Use the CLI (`npx shadcn-ui`) to add only the components you need.

Keep components inside a `components/ui` folder for organization.

Leverage Tailwind’s utility classes and variants for quick customization.

Modify component files directly — since they live in your repo, you own them.

Combine with Radix UI documentation when extending component behavior.

Official Docs Github