shadcn/ui Has a Free API You've Never Heard Of

#shadcnui #react #tailwindcss #ui

shadcn/ui is not a component library — it's a collection of re-usable components you copy into your project. Unlike traditional libraries, you own the code completely. No npm dependency, no version conflicts, full customization.

What Makes shadcn/ui Special?

Copy, not install — components live in YOUR codebase
Full ownership — modify anything, no upstream breaking changes
Radix primitives — built on accessible, unstyled components
Tailwind CSS — styled with utility classes
CLI — add components with one command

The Hidden API: CLI Component System

# Initialize in your project
npx shadcn@latest init

# Add individual components
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add data-table
npx shadcn@latest add form
npx shadcn@latest add chart

# Add multiple at once
npx shadcn@latest add card badge avatar dropdown-menu

Each command copies the component source code into your project:

src/components/ui/
  button.tsx      — you own this
  dialog.tsx      — you own this
  data-table.tsx  — you own this

Component API — Fully Customizable

import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

function CreateProjectDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">New Project</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Create project</DialogTitle>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">Name</Label>
            <Input id="name" className="col-span-3" />
          </div>
        </div>
        <Button type="submit">Create</Button>
      </DialogContent>
    </Dialog>
  );
}

Theme API

/* globals.css — customize everything */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  }
}

Registry API (v2) — Custom Component Collections

{
  "name": "my-company-ui",
  "type": "registry:ui",
  "registryDependencies": ["button", "card"],
  "files": [{
    "path": "ui/metric-card.tsx",
    "content": "...",
    "type": "registry:ui"
  }]
}

Quick Start

npx shadcn@latest init
# Select: TypeScript, Tailwind, path aliases
# Start adding components!

Why Teams Choose shadcn/ui

A lead developer shared: "We tried Material UI, Chakra, and Ant Design. Every major version broke our app. With shadcn/ui, the code is ours — we never worry about upstream changes. Our custom design system is built on top of it."

Building React UIs? Email spinov001@gmail.com or check my developer tools.

Component library or copy-paste? What's your UI approach?

DEV Community