Open-code foundations
Create a current project
Start from the current shadcn CLI or add it to an existing React project without copying setup commands from an outdated tutorial.
8 minute lesson
The CLI evolves quickly. Use the current installation page to choose a supported template or initialize an existing Next.js or Vite project.
For this course, create a Next.js project so the final interface can connect to the preceding Next.js course. The CLI can scaffold a template directly, while init configures an existing project. Run commands from the application root and inspect every prompt rather than accepting a base, style, icons, and color you did not intend.
The current CLI lets you select a supported primitive base. That decision changes generated imports and composition APIs, so record it with the style and color choices. Do not combine a recent Base UI project with component code copied from an old Radix tutorial without translating the behavior.
# new Next.js template
npx shadcn@latest init -t next
# or inside an existing compatible project
npx shadcn@latest init
Before initialization, commit or snapshot the clean application. Run the command, then review components.json, global CSS, package changes, aliases, and every created file. Start the app and run its normal production build once; a styled demo page is not proof that aliases and server/client boundaries build correctly.
Create project-board with the current Next.js template or initialize the existing course project. Record the CLI version, base, style, icon library, and package changes so a later generated component can be reproduced and reviewed.
Lesson completed