nextjs-shadcn

# shadcn/ui for Next.js

Beautiful, accessible components built on Radix UI with Tailwind CSS styling.

## Agent Workflow (MANDATORY)

Before ANY implementation, launch in parallel:

1. **fuse-ai-pilot:explore-codebase** - Analyze existing components and patterns
2. **fuse-ai-pilot:research-expert** - Verify latest shadcn/ui docs via Context7/Exa
3. **mcp__shadcn__*** - Search registry for component availability

After implementation, run **fuse-ai-pilot:sniper** for validation.

---

## Overview

### When to Use

- Building UI components for Next.js App Router applications
- Need accessible, customizable form components (inputs, selects, checkboxes)
- Implementing dialogs, sheets, drawers, or overlay patterns
- Creating data tables with sorting, filtering, and pagination
- Building navigation menus, sidebars, or command palettes
- Need toast notifications or alert feedback components

### Why shadcn/ui

| Feature | Benefit |
|---------|---------|
| Copy/paste model | Components copied to your project, full ownership |
| Radix UI foundation | Accessibility built-in, unstyled primitives |
| Tailwind CSS styling | Utility-first, easy customization |
| TanStack Form ready | Modern form library with Field pattern |
| Server Components | RSC-compatible, optimal bundle size |
| Lucide icons | Consistent, customizable icon set |

---

## Critical Rules

1. **NEVER create components manually** - Always install with `bunx --bun shadcn@latest add`
2. **TanStack Form only** - NOT React Hook Form for all form implementations
3. **Radix UI primitives** - Components built on Radix (NOT Base UI)
4. **Lucide icons** - Default icon library, NOT Remix icons or others
5. **Field pattern** - Use Field, FieldLabel, FieldError for form fields
6. **SOLID paths** - Components at `@/modules/cores/shadcn/components/ui/`

---

## Architecture

### Component Foundation

- **Radix UI** - Headless, accessible primitives (Dialog, Select, Popover, Tabs)
- **Tailwind CSS v4** - Styling via utility