Shadcn.io is not affiliated with official shadcn/ui
Installation
How to install dependencies and structure your app. Official shadcn CLI, then add a component from the shadcn.io registry — Next.js, Vite, Laravel, and more.
Choose the setup that matches your starting point. init -t scaffolds a new app. init alone configures one you already have. Then add a file from the shadcn.io registry — same CLI, our URL.
Use the CLI
Scaffold a supported template from the terminal
Existing project
Add shadcn to an app you already created
Choose a framework
Next.js, Vite, Laravel, React Router, and the rest
Use the CLI
npx shadcn@latest init -t [framework]Supported templates: next, vite, start, react-router, astro.
Laravel is not a template. Create the app with laravel new, then run npx shadcn@latest init from the project root.
Then add a component. Official registry:
npx shadcn@latest add buttonshadcn.io registry — same CLI, our URL:
npx shadcn@latest add https://www.shadcn.io/r/button.jsonThe file lands in components/ui/button.tsx. Browse the catalog on /ui.
Existing project
Each framework guide has an Existing project section: Tailwind, the @/ alias (or ~/ on React Router), then init with no -t.
Weird bundler? Manual.
Choose your framework
Next.js
App Router. init -t next
Vite
React + TypeScript. init -t vite
Laravel
laravel new, then init
React Router
Framework mode. init -t react-router
Remix
Legacy. Prefer React Router
Astro
Islands + React. init -t astro
TanStack Start
Full-stack. init -t start
TanStack Router
SPA file routes + Tailwind
Gatsby
Tailwind v3. npm init gatsby
Manual
No CLI scaffold. You wire Tailwind
Official add vs our URL
npx shadcn@latest add button hits ui.shadcn.com. npx shadcn@latest add https://www.shadcn.io/r/button.json is this site. Same CLI. Our file is the one on /ui/button.
Questions
Was this page helpful?
Sign in to leave feedback.
Why AI tools work
Agents read the file in your repo, not a package in node_modules. Add from the shadcn.io registry with the official CLI — Cursor, Claude, Copilot.
Next.js
Install shadcn/ui in Next.js with the official CLI. App Router, then add a component from the shadcn.io registry. TypeScript and Tailwind CSS.