shadcn/ui Designer

Build modern, accessible user interfaces with shadcn/ui components in Next.js/React.

Quick Start Workflow

1. Understand requirements - Identify what UI needs to be built
2. Select components - Choose appropriate shadcn components (see component-catalog.md)
3. Install components - Run npx shadcn@latest add <component-name>
4. Compose UI - Build the interface using composition patterns (see composition-patterns.md)
5. Test and refine - Ensure responsiveness and accessibility

Component Selection

Use references/component-catalog.md to find the right component for your needs.

Quick Decision Tree