Design · A design system your AI builder follows on every screen. · a tool
The open-source project ui, by shadcn-ui
“A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.” — the project's own words, on GitHub
Paste this into the AI that runs on your computer. It does the install, checks it works, and tells you what to type first. If anything fails, paste the error back to it.
Install ui (https://github.com/shadcn-ui/ui) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Claude Code, running on my machine. 1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password. 2. Run `pnpm dlx shadcn@latest init` inside an existing project — it installs itself into that project rather than being cloned. 3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says. Tool-specific notes: Run pnpm dlx shadcn@latest init -t <framework> inside an existing project — next for Next.js, vite for Vite, start for TanStack Start, react-router for React Router, or astro for Astro; for Laravel, create the Laravel app first, then run the init command. If I want to add components by asking in plain language rather than typing commands, set up its MCP server: add a shadcn entry (command npx, args ["shadcn@latest", "mcp"]) to .mcp.json for Claude Code or .cursor/mcp.json for Cursor, then ask it to list the available components as a smoke test. 4. Run the smallest test the README gives, and show me the output. 5. When it works, tell me what to type first, in one line, for this job: Set it up in your project. If anything fails, show me the exact error and fix it before going on.
Install ui (https://github.com/shadcn-ui/ui) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Kimi, running on my machine. 1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password. 2. Run `pnpm dlx shadcn@latest init` inside an existing project — it installs itself into that project rather than being cloned. 3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says. Tool-specific notes: Run pnpm dlx shadcn@latest init -t <framework> inside an existing project — next for Next.js, vite for Vite, start for TanStack Start, react-router for React Router, or astro for Astro; for Laravel, create the Laravel app first, then run the init command. If I want to add components by asking in plain language rather than typing commands, set up its MCP server: add a shadcn entry (command npx, args ["shadcn@latest", "mcp"]) to .mcp.json for Claude Code or .cursor/mcp.json for Cursor, then ask it to list the available components as a smoke test. 4. Run the smallest test the README gives, and show me the output. 5. When it works, tell me what to type first, in one line, for this job: Set it up in your project. If anything fails, show me the exact error and fix it before going on.
Install ui (https://github.com/shadcn-ui/ui) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Gemini CLI, running on my machine. 1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password. 2. Run `pnpm dlx shadcn@latest init` inside an existing project — it installs itself into that project rather than being cloned. 3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says. Tool-specific notes: Run pnpm dlx shadcn@latest init -t <framework> inside an existing project — next for Next.js, vite for Vite, start for TanStack Start, react-router for React Router, or astro for Astro; for Laravel, create the Laravel app first, then run the init command. If I want to add components by asking in plain language rather than typing commands, set up its MCP server: add a shadcn entry (command npx, args ["shadcn@latest", "mcp"]) to .mcp.json for Claude Code or .cursor/mcp.json for Cursor, then ask it to list the available components as a smoke test. 4. Run the smallest test the README gives, and show me the output. 5. When it works, tell me what to type first, in one line, for this job: Set it up in your project. If anything fails, show me the exact error and fix it before going on.
Install ui (https://github.com/shadcn-ui/ui) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Codex, running on my machine. 1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password. 2. Run `pnpm dlx shadcn@latest init` inside an existing project — it installs itself into that project rather than being cloned. 3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says. Tool-specific notes: Run pnpm dlx shadcn@latest init -t <framework> inside an existing project — next for Next.js, vite for Vite, start for TanStack Start, react-router for React Router, or astro for Astro; for Laravel, create the Laravel app first, then run the init command. If I want to add components by asking in plain language rather than typing commands, set up its MCP server: add a shadcn entry (command npx, args ["shadcn@latest", "mcp"]) to .mcp.json for Claude Code or .cursor/mcp.json for Cursor, then ask it to list the available components as a smoke test. 4. Run the smallest test the README gives, and show me the output. 5. When it works, tell me what to type first, in one line, for this job: Set it up in your project. If anything fails, show me the exact error and fix it before going on.
Run the init command for whatever framework your project already uses, and check that it added a components folder and a config file without touching anything else.
Ask your AI to add a single component, like a button or a card, and open the file it created — a good result is plain, readable code you could edit by hand, not a black box.
Once its connector is set up, ask your AI to show you what components are available and add the right one to a real screen by name, then check the result looks like the rest of your product.
shadcn-ui/ui on GitHub, under the MIT licence. 123,417 stars, checked 9 September 2026. Last change 8 September 2026. We did not write it; we checked it, and wrote this page so you can use it.
If you're launching or growing a brand across Asia and the West, a call is where we work out whether it's a fit.