Component Library (shadcn/ui)

Overview

shadcn/ui is a collection of reusable components built with:

• Radix UI - Accessible, unstyled primitives
• Tailwind CSS - Styling
• Class Variance Authority - Variant management
• TypeScript - Type safety

Configuration

Location: components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/cn",
    "ui": "@/components/ui"
  }
}

Available Components

Location: src/components/ui/

Component	Description	Based On
button.tsx	Button with variants	Radix Slot
input.tsx	Text input with formatting	Custom
select.tsx	Dropdown select	Radix Select
card.tsx	Card container	Custom
dialog.tsx	Modal dialog	Radix Dialog
form.tsx	Form components	React Hook Form
table.tsx	Table components	Custom
tabs.tsx	Tab navigation	Radix Tabs
toast.tsx	Toast notifications	Radix Toast
tooltip.tsx	Tooltip	Radix Tooltip
sidebar.tsx	Sidebar navigation	Custom
avatar.tsx	Avatar image	Radix Avatar
badge.tsx	Badge label	Custom
checkbox.tsx	Checkbox	Radix Checkbox
switch.tsx	Toggle switch	Radix Switch
radio-group.tsx	Radio buttons	Radix Radio Group
popover.tsx	Popover	Radix Popover
dropdown-menu.tsx	Dropdown menu	Radix Dropdown Menu
scroll-area.tsx	Scrollable area	Radix Scroll Area
separator.tsx	Divider	Radix Separator
skeleton.tsx	Loading skeleton	Custom
spinner.tsx	Loading spinner	Custom
stepper.tsx	Step indicator	Custom
calendar.tsx	Date picker	Custom
datePicker.tsx	Date picker	Custom
dateTimePicker.tsx	DateTime picker	Custom
color-picker.tsx	Color picker	Custom
phone-input/	Phone number input	Custom
fileUpload/	File upload	Custom

Component Structure

All UI components follow a consistent pattern:

// src/components/ui/button.tsx
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/cn";

// Define variants using Class Variance Authority
const buttonVariants = cva(
  // Base classes (always applied)
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    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 hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

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

// Component implementation
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 };

Key Patterns:

1. ✅ Class Variance Authority (CVA) - Type-safe variant management
2. ✅ cn() utility - Merges classes intelligently
3. ✅ forwardRef - Supports ref forwarding
4. ✅ asChild prop - Radix UI pattern for composition
5. ✅ TypeScript - Full type safety