nextjs-shadcn

# Next.js + shadcn/ui Build distinctive, production-grade interfaces that avoid generic "AI slop" aesthetics. ## Core Principles 1. **Minimize noise** - Icons communicate; excessive labels don't 2. **No generic AI-UI** - Avoid purple gradients, excessive shadows, predictable layouts 3. **Context over decoration** - Every element serves a purpose 4. **Theme consistency** - Use CSS variables from `globals.css`, never hardcode colors ## Quick Start ```bash bunx --bun shadcn@latest init -t next ``` For a custom design system, generate a preset code in `shadcn/create` and apply it: ```bash bunx --bun shadcn@latest init --preset <CODE> --template next ``` ## Component Rules ### Page Structure ```tsx // page.tsx - content only, no layout chrome export default function Page() { return ( <> <HeroSection /> <Features /> <Testimonials /> </> ); } // layout.tsx - shared UI (header, footer, sidebar) export default function Layout({ children }: { children: React.ReactNode }) { return ( <> <Header /> <main>{children}</main> <Footer /> </> ); } ``` ### Client Boundaries - `"use client"` only at leaf components (smallest boundary) - Props must be serializable (data or Server Actions, no functions/classes) - Pass server content via `children` ### Import Aliases Always use `@/` alias (e.g., `@/lib/utils`) instead of relative paths (`../../lib/utils`). ### Style Merging ...