shadcn/ui - Components You Actually Own

Been using shadcn/ui for about 8 months now and it's the first component library that doesn't make me want to throw my laptop out the window. Created by shadcn at Vercel, it's not another npm package you'll spend 3 hours fighting to change a button color.

Instead you copy the actual component code into your project. No dependencies to break, no theme systems to fight, no surprise breaking changes ruining your Friday deploy.

How This Actually Works

Other component libraries make you wrestle with theme systems for hours. shadcn/ui just gives you the actual component code. You run a CLI command, it drops the files in your project, done. Here's why this works better:

• Complete ownership - Components become part of your codebase, not external dependencies
• No version conflicts - Breaking changes can't ruin your weekend
• Unlimited customization - Change anything you want without fighting theme systems
• Better bundle optimization - Only include what you actually use
• Zero vendor lock-in - If shadcn/ui disappeared tomorrow, your code still works

What's Under the Hood

These components aren't built from scratch - they use three libraries that actually work:

Radix UI Primitives

All the interactive stuff uses Radix UI under the hood. This is what actually makes the accessibility work - other libraries bolt on ARIA attributes as an afterthought, but Radix builds components with accessibility from day one:

• WAI-ARIA compliance - Proper attributes automatically, no more failing audits
• Keyboard navigation - Tab through everything logically, unlike Material-UI's broken focus traps
• Focus management - Modals trap focus correctly, screen readers don't get lost
• Screen reader tested - Actually tested with NVDA and JAWS, not just automated tools

Been using this shit for a while now. The accessibility just works because it's built on Radix primitives. You still need to test with real screen readers for your specific use case, but you're not starting from scratch with ARIA patterns.

Tailwind CSS Integration

Components are built specifically for Tailwind CSS. No CSS-in-JS runtime overhead, no fighting with styled-components:

• Utility classes - Want a red button? Change bg-blue-600 to bg-red-600, done
• Design system consistency - Uses Tailwind's spacing scale throughout, no magic numbers
• Easy customization - Modify appearance by changing classes, not digging through theme objects
• Predictable styling - Follows Tailwind's design principles, everything feels consistent

Install the Tailwind CSS IntelliSense extension if you haven't already. The autocomplete saves you from constantly looking up class names.

Modern React Patterns

No legacy React bullshit here - everything uses current patterns:

• TypeScript everywhere - Full type safety, no more any types breaking things at runtime
• Server Components ready - Works with Next.js App Router right out of the box
• Compound component patterns - Build complex UIs without prop drilling hell
• Hook-based - No class components or deprecated lifecycle methods

The components use modern React patterns, not legacy class component garbage. TypeScript catches your mistakes before they hit production, and the compound component approach means less prop drilling nightmares.

Framework Flexibility

Works with whatever React framework you're using:

• Next.js - Both App Router and Pages Router, no configuration headaches
• Vite - Fast dev server, components just work
• Remix - Server-side rendering handled properly
• Laravel - Works with Inertia.js, surprisingly smooth
• Astro - React islands approach, components hydrate correctly

The CLI detects your framework automatically and handles the SSR setup for you. One less thing to configure.

Installation and Setup

Setting up shadcn/ui is straightforward thanks to its CLI. The CLI works fine most of the time, but the diff command is sketchy as hell - use it at your own risk. You'll occasionally hit edge cases with unusual project setups.

Quick Start

The fastest way to get started is using the shadcn CLI:

npx shadcn@latest init

The CLI asks you a few questions about your setup and usually gets it right:

• Framework selection - Next.js, Vite, Remix, Laravel, etc. (auto-detection usually works, but fails in weird monorepo setups)
• Styling approach - CSS variables or Tailwind utilities (CSS variables are more flexible for theming)
• Component style - Default or New York design system (New York looks cleaner IMO)
• Base color - Choose from gray, neutral, slate, stone, or zinc (you can change this later)
• Import aliases - Configure your preferred import paths (the CLI will detect your tsconfig.json paths)

This creates a components.json file that stores all your configuration. Don't lose this file - you need it for adding components later, and the CLI fails spectacularly without it. The CLI works well but will choke if your package.json is malformed or you're missing required dependencies.

Framework-Specific Setup

Works with Next.js, Vite, Laravel, whatever. The CLI usually figures it out:

## For Next.js - probably what you're using
npx create-next-app@latest my-app && cd my-app && npx shadcn@latest init

## For Vite - if you hate Next.js
npm create vite@latest my-app -- --template react-ts && cd my-app && npx shadcn@latest init

If you're using something weird like Laravel with Inertia, the CLI might choke. Check the docs if it fails.

Adding Components

Once initialized, adding components is as simple as:

npx shadcn@latest add button card dialog

Component Structure

Each component comes with:

• Main component file - The primary component implementation
• Dependencies - Any required Radix UI primitives or utilities
• TypeScript definitions - Complete type safety
• Tailwind configuration - Any custom colors or animations

Advanced Configuration

Advanced Stuff

The CLI supports private registries, monorepo setups, and some AI integration stuff. Check the docs if you need any of that - most people don't.

Development Workflow

Exploring Components

You can preview components before adding them, but honestly just add the ones you need:

npx shadcn@latest add button card dialog

Updating Components

There's an experimental diff command but it's buggy as hell:

npx shadcn@latest diff button

Half the time it shows false positives. Just manually compare the files if you need to update.

The development experience is pretty good - you're working with your own code, so there are no API limitations or update conflicts to worry about. When it works, it works well.