Building UI Components with shadcn/ui

shadcn/ui is not a component library in the traditional sense. Instead of installing a package and importing components, you copy the source code directly into your project. This means you own every component and can customize it freely.

Why shadcn/ui

• No version lock-in — components live in your codebase
• Built on Radix UI primitives for accessibility out of the box
• Styled with Tailwind CSS, fully themeable via CSS variables
• Works seamlessly with Next.js and TypeScript

Installation

Initialize shadcn/ui in a Next.js project:

npx shadcn@latest init

This sets up Tailwind, adds a components/ui/ directory, and configures the cn() utility.

Adding Components

Add only what you need — each component is added individually:

npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add input

Each command writes the component source into components/ui/.

Usage

Components are used like any local React component:

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
export function LoginForm() {
  return (
    <form>
      <Input placeholder="Email" type="email" />
      <Button type="submit">Sign In</Button>
    </form>
  )
}

Theming

Colors, radius, and fonts are controlled via CSS variables in globals.css. Switching between light and dark mode is a single class toggle on the root element.

Conclusion

shadcn/ui shifts the ownership model — you get production-ready, accessible components without sacrificing control. It pairs especially well with Next.js and TypeScript projects where long-term maintainability matters.