Greyhaven Design System

A modern design system built with Next.js, shadcn/ui, and Radix UI primitives.

Getting Started

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

Project Structure

greyhaven-design-system/
├── app/                    # Next.js app directory
│   ├── layout.tsx          # Root layout with fonts
│   ├── page.tsx            # Design system showcase
│   └── globals.css         # Global styles
├── components/
│   ├── ui/                 # Reusable UI components (57 components)
│   ├── design-system/      # Showcase components
│   └── theme-provider.tsx  # Theme context
├── hooks/                  # Custom React hooks
├── lib/
│   └── utils.ts            # Utility functions
├── styles/                 # Additional styles
└── public/                 # Static assets

Tech Stack

• Framework: Next.js 16, React 19, TypeScript
• Styling: Tailwind CSS 4, shadcn/ui, Radix UI
• Forms: React Hook Form, Zod
• Theming: next-themes (light/dark mode)