@repo/ui

A comprehensive collection of reusable UI components built with shadcn/ui and Tailwind CSS.

Overview

This package contains a complete set of accessible, customizable UI components that can be used across different applications in the workspace. Built with modern web technologies and best practices.

Tech Stack

• React 19 with TypeScript
• Tailwind CSS v4 for styling
• Radix UI for accessibility primitives
• Class Variance Authority for component variants
• Tailwind Merge for className optimization
• Storybook 8.6 for component documentation

Installation

# In your project root
pnpm add @repo/ui

Usage

Import components from their specific paths:

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

Example

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

export function LoginForm() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Login</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="Enter your email" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">Password</Label>
          <Input
            id="password"
            type="password"
            placeholder="Enter your password"
          />
        </div>
        <Button className="w-full">Sign In</Button>
      </CardContent>
    </Card>
  );
}

Available Components

Form Components

• Button - Versatile button with multiple variants
• Input - Text input with various types and states
• Label - Accessible form labels
• Textarea - Multi-line text input
• Checkbox - Boolean input control
• Radio Group - Single selection from multiple options
• Select - Dropdown selection component
• Switch - Toggle control

Layout Components

• Card - Container for content with header, body, and footer
• Sheet - Slide-out panel component
• Dialog - Modal dialog windows
• Drawer - Mobile-friendly drawer component
• Tabs - Tabbed interface component
• Accordion - Collapsible content sections
• Separator - Visual divider component

Display Components

• Avatar - User profile images
• Badge - Status indicators and labels
• Alert - Notification messages
• Progress - Progress indicators
• Skeleton - Loading placeholders
• Table - Data table component

Navigation Components

• Breadcrumb - Navigation path indicator
• Navigation Menu - Main navigation component
• Menubar - Application menu bar
• Pagination - Page navigation controls

Development

Storybook

Run Storybook to view and develop components:

cd packages/ui
pnpm storybook

This will start Storybook at http://localhost:6006

Building

Build the package:

pnpm build

Linting

Lint the code:

pnpm lint

Type Checking

Check TypeScript types:

pnpm check-types

Styling

All components use Tailwind CSS with CSS variables for theming. The package includes:

• Light and dark theme support - Automatic theme switching
• Customizable color tokens - CSS variables for easy customization
• Responsive design utilities - Mobile-first responsive design
• Animation utilities - Smooth animations via tailwindcss-animate

Theme Customization

The design system uses CSS variables that can be customized:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  /* ... more variables */
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* ... dark theme variables */
}

Accessibility

Components are built with accessibility in mind:

• Keyboard Navigation - Full keyboard support via Radix UI primitives
• Screen Reader Support - Proper ARIA attributes and semantic HTML
• Focus Management - Logical focus flow and visible focus indicators
• Color Contrast - WCAG compliant color combinations

Contributing

1. Add new components to src/core/
2. Export them from src/index.ts
3. Add the export path to package.json exports
4. Create Storybook stories for documentation
5. Follow the existing component patterns and conventions

License

MIT