shadcn/ui

shadcn/ui is a collection of accessible React components maintained by its creator shadcn as an open-source project. It ranks #9 among trending tech tags at roughly 8.7% usage share. It's trending because of its unusual model — rather than installing a component library as an npm dependency, a CLI copies the actual component source (built on Radix UI primitives and styled with Tailwind CSS) straight into your codebase, so you fully own and can edit every line.

Example

The CLI generates a real component file (e.g. components/ui/button.tsx) directly in your project, which you then import and use like any local component.

// components/ui/button.tsx was generated by the shadcn CLI
import { Button } from "@/components/ui/button"

export function SubmitForm() {
  return (
    <Button variant="default" size="lg" onClick={() => console.log("saved")}>
      Save changes
    </Button>
  )
}

Getting started

Initialize shadcn/ui in an existing React/Next.js + Tailwind project, then add components one at a time as you need them.

# set up shadcn/ui in your project
npx shadcn@latest init

# add a specific component (copies the source into components/ui)
npx shadcn@latest add button