G
GTM Vault
Browse
  • Dashboard
    • Automations
    • Skills
    • Prompts
    • Makers
  • Sign in
All Skills

shadcn-init

Set up a new Next.js project with shadcn/ui correctly — new-york style, radix primitives, Geist font fix, dark theme

skillFrontend DevelopmentClaude Code SkillsInternal Ops
Original
by Roheel Jain
Skill Content

Shadcn/UI Project Initialization

Run through each step in order. Do not skip any.

Step 1: Verify components.json

Read components.json. If it doesn't exist, stop and tell the user to run npx shadcn@latest init first.

If it exists, ensure:

  • "style" is "new-york" — if it says "base-nova", change it immediately
  • "tsx" is true
  • Aliases are set: "ui": "@/components/ui", "hooks": "@/hooks", "utils": "@/lib/utils"

Step 2: Check dependencies

Run grep "@base-ui/react" package.json. If found:

  • Run npm uninstall @base-ui/react
  • Then grep -r "@base-ui/react" src/ to find any component files still importing it
  • Replace ALL of them with canonical radix versions (use get_component MCP tool)

Verify radix-ui is in dependencies. If not, run npm install radix-ui.

Step 3: Fix Geist font for Tailwind v4

Read src/app/globals.css. Check the @theme inline block.

Problem: --font-sans: var(--font-geist-sans) in @theme inline fails because Next.js injects --font-geist-sans at runtime, but Tailwind v4 resolves @theme at build time.

Fix: In the @layer base block, set font-family directly:

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  }
  code, pre {
    font-family: var(--font-geist-mono), ui-monospace, monospace;
  }
}

Do NOT use @apply font-sans in the html rule — it won't resolve correctly.

Step 4: Verify layout.tsx

Read src/app/layout.tsx. Ensure:

  • Geist fonts are imported and applied via variable prop on <html> className
  • Dark mode class is present if using dark theme (className="dark" on <html>)
  • No duplicate TooltipProvider (sidebar's SidebarProvider includes one)

Step 5: Build check

Run npm run build. It should complete with zero TypeScript errors. If any component fails with Cannot find module '@base-ui/react/...', that component still needs replacing (go back to Step 2).

Report the result to the user.

Tech Stack
JavaScript
JavaScript