Registry build script command
Run pnpm registry:build to build the block definition. This only needs to be run when updating the block definition in registry-blocks.ts, not for every code change.
blocks/cli
73 notes in this subject, read out of this brain and free to use. This is page 1 of 2.
init command: initialize project
The init command initializes configuration and dependencies for an existing project, or creates a new project with --name. It installs dependencies, adds the cn util, and configures CSS variables for the project. Run with: npx shadcn@latest init
init command options
init [options] [components...] accepts: -t/--template (next, vite, start, react-router, laravel, astro), -b/--base (base, radix, aria), -p/--preset [name], -y/--yes (default: true), -d/--defaults (--template=next --preset=nova, default: false), -f/--force (default: false), -c/--cwd <cwd>, -n/--name <name>, -s/--silent (default: false), --css-variables (default: true), --no-css-variables, --monorepo, --no-monorepo, --rtl, --no-rtl, --pointer, --no-pointer, --reinstall, --no-reinstall, -h/--help
create command alias
The create command is an alias for init. Run with: npx shadcn@latest create
add command: add components
The add command adds components and dependencies to your project. Run with: npx shadcn@latest add [component]
add command options
add [options] [components...] accepts: -y/--yes (default: false), -o/--overwrite (default: false), -c/--cwd <cwd>, -a/--all (default: false), -p/--path <path>, -s/--silent (default: false), --dry-run (default: false), --diff [path], --view [path], -h/--help
apply command: apply preset
The apply command applies a preset to an existing project. Run with: npx shadcn@latest apply a2r6bw. You can apply only the theme or fonts from a preset without reinstalling UI components using --only theme or --only font.
apply command options
apply [options] [preset] accepts: --preset <preset>, --only [parts] (theme or font), -y/--yes (default: false), -c/--cwd <cwd>, -s/--silent (default: false), -h/--help
preset decode command
The preset decode command decodes a preset code. Run with: npx shadcn@latest preset decode a2r6bw. Options: --json (default: false), -h/--help
preset resolve command
The preset resolve command resolves the preset from the current project. Run with: npx shadcn@latest preset resolve. The preset info command is an alias. Options: -c/--cwd <cwd>, --json (default: false), -h/--help
preset url command
The preset url command prints the create URL for a preset code. Run with: npx shadcn@latest preset url a2r6bw. Options: -h/--help
preset open command
The preset open command opens a preset code in the browser. Run with: npx shadcn@latest preset open a2r6bw. Options: -h/--help
view command: view registry items
The view command allows viewing items from the registry before installing them. Run with: npx shadcn@latest view [item]. You can view multiple items at once (npx shadcn@latest view button card dialog) or items from namespaced registries (npx shadcn@latest view @acme/auth @v0/dashboard). Options: -c/--cwd <cwd>, -h/--help
search command: search registries
The search command searches for items from registries. Run with: npx shadcn@latest search [registry]. You can search with a query (npx shadcn@latest search @shadcn -q "button") or search multiple registries (npx shadcn@latest search @shadcn @v0 @acme). The list command is an alias. Options: -c/--cwd <cwd>, -q/--query <query>, -l/--limit <number> (default: 100), -o/--offset <number> (default: 0), -h/--help
docs command: fetch component documentation
The docs command fetches documentation and API references for components. Run with: npx shadcn@latest docs [component]. Options: -c/--cwd <cwd>, -b/--base <base> (base, radix, or aria, defaults to project base), --json (default: false), -h/--help
info command: get project information
The info command gets information about your project. Run with: npx shadcn@latest info. Options: -c/--cwd <cwd>, --json (default: false), -h/--help
migrate command: run migrations
The migrate command runs migrations on your project. Run with: npx shadcn@latest migrate [migration]. Available migrations: icons (migrate UI components to different icon library), radix (migrate to radix-ui), rtl (migrate components to support RTL). Options: -c/--cwd <cwd>, -l/--list (default: false), -y/--yes (default: false), -f/--from <library>, -t/--to <library>, -h/--help
migrate icons: change icon library
The migrate icons command moves components from one icon library to another. Run with: npx shadcn@latest migrate icons. It prompts for source and target libraries, rewrites icon imports and JSX usage in the ui directory, installs the target library, and updates iconLibrary in components.json. Supported libraries: lucide, tabler, hugeicons, phosphor, remixicon, radix (legacy). Use --from and --to flags to skip prompts (npx shadcn@latest migrate icons --from lucide --to phosphor --yes). Can migrate specific files or glob patterns.
build command: generate registry JSON
The build command generates registry JSON files. Run with: npx shadcn@latest build. This command reads the registry.json file and generates registry JSON files in the public/r directory. Options: -o/--output <path> (default: ./public/r), -c/--cwd <cwd>, -h/--help
migrate rtl: right-to-left support
The migrate rtl command transforms components to support RTL (right-to-left) languages. Run with: npx shadcn@latest migrate rtl. It updates components.json to set rtl: true, transforms physical CSS properties to logical equivalents (e.g., ml-4 to ms-4, text-left to text-start), and adds rtl: variants where needed (e.g., space-x-4 to space-x-4 rtl:space-x-reverse). Can migrate specific files or glob patterns, or all files in the ui directory if no path provided.
migrate radix: unified radix-ui package
The migrate radix command updates imports from individual @radix-ui/react-* packages to the unified radix-ui package. Run with: npx shadcn@latest migrate radix. It transforms imports from @radix-ui/react-* to radix-ui and adds the radix-ui package to package.json. Example: import * as DialogPrimitive from "@radix-ui/react-dialog" becomes import { Dialog as DialogPrimitive } from "radix-ui". Can migrate specific files or glob patterns, or all files in the ui directory if no path provided.
eject command: inline shadcn utilities
The eject command inlines shadcn/tailwind.css into your global CSS file and removes the shadcn dependency from your project. Run with: npx shadcn@latest eject. The init command adds @import "shadcn/tailwind.css" to global CSS, which provides shared Tailwind v4 utilities such as custom variants (data-open:, data-closed:, etc.) and accordion animations. This action is irreversible; after ejecting, future shadcn CLI updates to shadcn/tailwind.css will not apply automatically. In a monorepo, run from the workspace containing components.json and global CSS: npx shadcn@latest eject -c packages/ui. Options: -c/--cwd <cwd>, -y/--yes (default: false), -s/--silent (default: false), -h/--help
Create components.json with CLI
You can create a components.json file in your project by running the command: npx shadcn@latest init
MCP init command for OpenCode
To set up the MCP server for OpenCode, run the command: npx shadcn@latest mcp init --client opencode
MCP init command for Claude Code
To set up the MCP server for Claude Code, run the command: npx shadcn@latest mcp init --client claude
MCP init command for Cursor
To set up the MCP server for Cursor, run the command: npx shadcn@latest mcp init --client cursor
MCP init command for VS Code
To set up the MCP server for VS Code, run the command: npx shadcn@latest mcp init --client vscode
MCP init command for Codex
To set up the MCP server for Codex, run the command: npx shadcn@latest mcp init --client codex
add command in monorepo installs components to correct paths
To add components in a monorepo, navigate to your app path (e.g., `cd apps/web`) and run `npx shadcn@latest add [COMPONENT]`. The CLI automatically determines the component type and installs files to the correct location. For example, `npx shadcn@latest add button` installs the button component under `packages/ui` and updates import paths for `apps/web`. For blocks like `npx shadcn@latest add login-01`, the CLI installs dependencies (button, label, input, card) under `packages/ui` and the main block component (login-form) under `apps/web/components`.
Monorepo CLI benefits
The new monorepo support in the CLI handles monorepo structure automatically: it installs components and dependencies to the correct paths, handles registry dependencies correctly, and manages import paths for you. Previously, adding components to a monorepo required manual path management and import fixing.
init --monorepo command creates new monorepo project
Run `npx shadcn@latest init --monorepo` to create a new monorepo project. The command will prompt you to select a template from: Next.js, Vite, TanStack Start, React Router, or Astro. This creates a new monorepo project with two workspaces: `web` and `ui`, and uses Turborepo as the build system.
Add blocks to your project
Use the command 'npx shadcn@latest add [block-name]' to add blocks to your project. For example, 'npx shadcn@latest add login-03' adds a login block. Blocks are imported from '@/components/[block-name]' and used like components.
Add components using CLI
Use the command 'npx shadcn@latest add [component-name]' to add components to your project. For example, 'npx shadcn@latest add button' adds a button component. You can add multiple components at once: 'npx shadcn@latest add button card input label'. You can also add all available components with 'npx shadcn@latest add --all'.
Customize theme with init preset
You can apply a custom theme preset to your project using the command 'npx shadcn@latest init --preset [CODE]', where [CODE] is a preset code. Presets can be created visually on ui.shadcn.com.
Install shadcn skill in AI assistant
Use the command 'npx skills add shadcn/ui' to install the shadcn skill in your AI assistant. This gives the AI assistant access to the full component registry, documentation, and search.
Connect shadcn MCP server to editor
Use the command 'npx shadcn@latest mcp init' to connect the shadcn MCP server in your editor. The MCP server gives your AI assistant access to the full component registry, documentation, and search.
npm --legacy-peer-deps flag behavior
The --legacy-peer-deps flag skips strict peer dependency checks, allowing installation of packages with unmet peer dependencies to avoid errors.
shadcn init command with React 19 on npm
Running 'npx shadcn@latest init -d' with React 19 and npm will prompt the user to select an option to resolve peer dependency issues: either '--force' or '--legacy-peer-deps'.
npm --force flag behavior
The --force flag ignores and overrides any dependency conflicts, forcing the installation of packages.
Skill provides CLI command reference
The skill includes full reference for all CLI commands: init, add, search, view, docs, diff, info, and build. This includes flags, dry-run mode, smart merge workflows, presets, and templates.
CLI init command for Astro
Run npx shadcn@latest init -t astro to scaffold a new Astro project and configure options including base, preset, and monorepo settings. For a monorepo project, use npx shadcn@latest init -t astro --monorepo flag.
Add components to Astro project
Use npx shadcn@latest add [component-name] to add components. For monorepo projects, run from apps/web or specify the workspace: npx shadcn@latest add [component-name] -c apps/web.
Gatsby shadcn/ui init command
Run `npx shadcn@latest init` to set up shadcn/ui in your Gatsby project.
Gatsby add shadcn/ui component
After initialization, add components using `npx shadcn@latest add button` (or replace 'button' with another component name). Components are installed in the project and can be imported from @/components/ui/{component-name}.
CLI init command syntax
The CLI command to scaffold a new project is: npx shadcn@latest init -t [framework]. Supported templates are: next, vite, start, react-router, and astro. For Laravel, run laravel new first, then npx shadcn@latest init.
shadcn/create for Laravel configuration
Use shadcn/create at /create?template=laravel to visually build your preset by choosing style, colors, fonts, and icons. After building your preset, click 'Create Project', choose your package manager, and copy the generated command. The generated command will look similar to 'npx shadcn@latest init --preset [CODE] --template laravel'. Run this command from the root of your Laravel app. When asked to overwrite components.json and components, choose Yes.
shadcn init command for Laravel
Run 'npx shadcn@latest init' from the root of your Laravel app to initialize shadcn/ui. When asked to overwrite components.json and components, choose Yes.
Adding components to Laravel with shadcn
Run 'npx shadcn@latest add switch' (or other component name) to add a component to your Laravel project. The command will add the component to 'resources/js/components/ui/[component].tsx'. For example, running 'npx shadcn@latest add switch' adds the Switch component to 'resources/js/components/ui/switch.tsx', which can then be imported from '@/components/ui/switch' in your pages or components.
CLI init command for new Next.js project
To create a new Next.js project with shadcn/ui using the CLI, run: npx shadcn@latest init -t next. For a monorepo project, add the --monorepo flag: npx shadcn@latest init -t next --monorepo.
Adding components to Next.js project
Add a component to your Next.js project with: npx shadcn@latest add [component-name]. For example, npx shadcn@latest add card adds the Card component. In a monorepo, run from apps/web or specify the workspace: npx shadcn@latest add [component-name] -c apps/web.
Add a component in Remix
Add a shadcn/ui component to your Remix project using: npx shadcn@latest add button (replace 'button' with the component name you want to add)
Add shadcn/ui component to TanStack Router project
To add a component like Button to a TanStack Router project, run: npx shadcn@latest add button
Add Button component to TanStack Start
To add the Button component to a TanStack Start project, run: npx shadcn@latest add button.
CLI init command for TanStack Start
To scaffold a new TanStack Start project using the CLI, run: npx shadcn@latest init -t start. For a monorepo project, use the --monorepo flag: npx shadcn@latest init -t start --monorepo.
Add component to TanStack Start monorepo
When adding components to a TanStack Start monorepo, run the command from the apps/web directory or specify the workspace from the repo root using the -c flag: npx shadcn@latest add card -c apps/web.
CLI init command for Vite
Run npx shadcn@latest init -t vite to scaffold a new Vite project. Follow the prompts to configure base, preset, monorepo, and more. For a monorepo project, use npx shadcn@latest init -t vite --monorepo.
Add component command
Use npx shadcn@latest add card to add a component to a project. For monorepo projects, run from apps/web or specify the workspace with npx shadcn@latest add card -c apps/web.
shadcn/create: init command with preset code
The shadcn/create setup generates a command that looks similar to: npx shadcn@latest init --preset [CODE] --template vite. The exact command includes selected options such as --base, --monorepo, or --rtl.
npx shadcn@latest mcp init --client command
To initialize MCP for a specific client, run 'npx shadcn@latest mcp init --client' followed by the client name. Supported clients are: claude, cursor, vscode, codex, and opencode. This command sets up MCP server configuration for your project.
View multiple registry resources
Use the view command to inspect multiple resources at once: `npx shadcn@latest view @v0/dashboard @shadcn/card` or view resources from URLs: `npx shadcn@latest view https://registry.example.com/button.json`.