Ui

Base UI components from shadcn/ui providing accessible, customizable primitives built on Radix UI and styled with Tailwind CSS.

UI Components (components/ui/)

Base UI components from shadcn/ui providing accessible, customizable primitives built on Radix UI and styled with Tailwind CSS.

Purpose

Provides consistent, accessible UI building blocks used throughout the application. All components follow shadcn/ui patterns for copy-paste customization.

Components

This directory contains shadcn/ui components that have been added to the project. Components are copied and customized rather than imported from a package, allowing full control over styling and behavior.

Usage

Import components directly:

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

export default function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Example</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Enter text" />
        <Button>Submit</Button>
      </CardContent>
    </Card>
  );
}

Styling

All components use Tailwind CSS with CSS variables for theming:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  /* ... */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... */
}

Customization

Components can be customized by:

1. Modifying the component file directly
2. Adding new variants via class variance authority (cva)
3. Extending with additional props
4. Wrapping with custom logic

Example:

// Extend button with loading state
export function LoadingButton({ loading, children, ...props }: Props) {
  return (
    <Button disabled={loading} {...props}>
      {loading && <Spinner className="mr-2" />}
      {children}
    </Button>
  );
}

Accessibility

All shadcn/ui components are built on Radix UI primitives, ensuring:

• Keyboard navigation
• Screen reader support
• Focus management
• ARIA attributes
• Proper semantic HTML

Adding New UI Components

Use the shadcn/ui CLI to add new components:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card

This copies the component source into components/ui/ for customization.

Documentation

For detailed component API and examples, see:

• shadcn/ui documentation
• Radix UI documentation