ShadcnUI

The problem

Every web app needs UI elements: buttons, dialogs, dropdowns, tabs, accordions. Building them from scratch is tedious and surprisingly hard — you need to handle keyboard navigation, accessibility, focus management, and animations.

Traditional component libraries like Material UI or Ant Design solve this, but they come with trade-offs: large bundle sizes, opinionated designs that are hard to override, and a dependency you can't easily escape.

What is Shadcn/UI?

Shadcn/UI takes a radically different approach. It's not a library you install — it's a collection of components you copy into your project.

Under the hood, each component is built on two things:

• Radix UI — headless primitives that handle all the complex behavior (accessibility, keyboard navigation, focus trapping)
• Tailwind CSS — for all the styling, which you can customize freely

The key difference: since the component code lives in your project, you have full control. You can tweak anything — colors, spacing, animations — without fighting a library's API.

Installation

You need a React project with Tailwind already set up. Then initialize Shadcn/UI:

npx shadcn@latest init

This creates a few config files and a components/ui/ folder where all your components will live.

To add a component, you don't install a package — you run a command that copies the source code into your project:

npx shadcn@latest add button

This creates a file at components/ui/button.tsx that you own entirely. You can open it, read it, and change anything you want.

Then use it like any React component:

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

export default function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  );
}

Most useful components

Shadcn/UI offers dozens of components. Here are the ones you'll use most often — and you're actually looking at several of them right now on this page!

Browse the full list of available components on the Shadcn/UI documentation.

Customization

Since the component code lives in your project, customizing it is straightforward. Open the file and edit the Tailwind classes.

For example, here's how you'd add a new success variant to the Button component:

// In components/ui/button.tsx, add to the variants object:
const buttonVariants = cva("...", {
  variants: {
    variant: {
      default: "bg-primary text-primary-foreground ...",
      destructive: "bg-destructive text-white ...",
      success: "bg-green-600 text-white hover:bg-green-700",  // ← new!
    },
  },
});

Now you can use <Button variant="success">Save</Button> anywhere in your app. No library update needed, no CSS override hacks.

Shadcn/UI and dataviz

Shadcn/UI is perfect for everything around your charts: control panels, settings dialogs, tabbed views, tooltips wrappers, and layout containers.

The charts themselves are built with SVG and styled with inline attributes — Tailwind and Shadcn don't apply there. But the surrounding UI is where these components shine.

Live demo

Let me walk you through adding Shadcn/UI to a project, installing a few components, and using them in a React app:

TODO: video goes here.