Shadcn/ui

Shadcn/ui represents an innovative approach to UI component libraries by offering not a traditional npm package, but a collection of components you copy directly into your project. Built on Radix UI for accessibility and Tailwind CSS for styling, it provides developers with complete control over their code while significantly accelerating modern interface development.

Fundamentals

• Components copied directly into your codebase rather than installed via npm
• Architecture based on Radix UI for accessible primitives and Tailwind CSS for styling
• Complete customization through source code ownership
• Coherent design system with CSS variables and reusable design tokens

Benefits

• Full code ownership: no external dependencies to maintain for UI components
• Unlimited customization: direct code modification according to specific needs
• Optimized bundle: only used components included without overhead
• Native accessibility: WCAG-compliant components thanks to Radix UI
• Excellent developer experience: integrated CLI to add components with one command
• Native TypeScript: complete typing and intelligent autocompletion
• Optimal performance: no additional runtime, directly compiled code

Practical Example

Installing and using a Button component with Shadcn/ui:

# Initial installation of Shadcn/ui in your project
npx shadcn-ui@latest init

# Adding the Button component
npx shadcn-ui@latest add button

// components/ui/button.tsx (generated in your project)
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent",
        ghost: "hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)

Button.displayName = "Button"

export { Button, buttonVariants }

// Using in your application
import { Button } from "@/components/ui/button"

export function Dashboard() {
  return (
    <div className="space-y-4">
      <Button>Default Button</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline" size="lg">Large Outline</Button>
      <Button variant="ghost" size="sm">Small Ghost</Button>
    </div>
  )
}

Implementation

1. Install base dependencies: React, Tailwind CSS, and required utilities (class-variance-authority, clsx)
2. Run the initialization command 'npx shadcn-ui@latest init' to configure the project
3. Configure the components.json file with your path and style preferences
4. Add necessary components with 'npx shadcn-ui@latest add [component-name]'
5. Customize CSS variables in your globals.css file to define your palette
6. Directly modify generated components according to your specific needs
7. Create your own variants by extending buttonVariants or other helpers

Related Tools

• Radix UI: accessible primitive library used as foundation
• Tailwind CSS: utility-first CSS framework for component styling
• Class Variance Authority (CVA): utility for creating type-safe component variants
• Lucide React: recommended icon library perfectly integrated
• React Hook Form: for form management with Shadcn/ui components
• Zod: schema validation often used with Shadcn/ui forms

Shadcn/ui revolutionizes the approach to component libraries by giving developers complete ownership of their UI code. This copy-paste-own philosophy eliminates the constraints of traditional npm packages while maintaining design consistency and first-class accessibility. For teams seeking flexibility, performance and total control, Shadcn/ui represents a modern solution that accelerates development without compromising on quality.