Dots

CLI

PreviousNext

Set up Dots and add components to your project from the command line.

init

Use the init command to initialize configuration and dependencies for an existing project, or create a new project with --name.

The init command installs dependencies, adds the cn util and configures CSS variables for the project.

pnpm dlx shadcn@latest init

To set up Dots, pass the Dots preset. It always resolves to React Aria with the Dots style:

pnpm dlx shadcn@latest init --preset https://dots.sendity.net/init?base=aria

Options

Usage: shadcn init [options] [components...]
 
initialize your project and install dependencies
 
Arguments:
  components                 names, url or local path to component
 
Options:
  -t, --template <template>  the template to use. (next, vite, start, react-router, laravel, astro)
  -b, --base <base>          the component library to use. (base, radix, aria)
  -p, --preset [name]        use a preset configuration
  -y, --yes                  skip confirmation prompt. (default: true)
  -d, --defaults             use default configuration: --template=next --preset=nova (default: false)
  -f, --force                force overwrite of existing configuration. (default: false)
  -c, --cwd <cwd>            the working directory. defaults to the current directory.
  -n, --name <name>          the name for the new project.
  -s, --silent               mute output. (default: false)
  --css-variables            use css variables for theming. (default: true)
  --no-css-variables         do not use css variables for theming.
  --monorepo                 scaffold a monorepo project.
  --no-monorepo              skip the monorepo prompt.
  --rtl                      enable RTL support.
  --no-rtl                   disable RTL support.
  --pointer                  enable pointer cursor for buttons.
  --no-pointer               disable pointer cursor for buttons.
  --reinstall                re-install existing UI components.
  --no-reinstall             do not re-install existing UI components.
  -h, --help                 display help for command

The create command is an alias for init:

pnpm dlx shadcn@latest create

add

Use the add command to add components and dependencies to your project.

pnpm dlx shadcn@latest add @dots/<name>

Options

Usage: shadcn add [options] [components...]
 
add a component to your project
 
Arguments:
  components           name, url or local path to component
 
Options:
  -y, --yes            skip confirmation prompt. (default: false)
  -o, --overwrite      overwrite existing files. (default: false)
  -c, --cwd <cwd>      the working directory. defaults to the current directory.
  -a, --all            add all available components (default: false)
  -p, --path <path>    the path to add the component to.
  -s, --silent         mute output. (default: false)
  --dry-run            preview changes without writing files. (default: false)
  --diff [path]        show diff for a file.
  --view [path]        show file contents.
  -h, --help           display help for command

view

Use the view command to view items from the registry before installing them.

pnpm dlx shadcn@latest view [item]

You can view multiple items at once:

pnpm dlx shadcn@latest view @dots/button @dots/card @dots/dialog

Or view items from namespaced registries:

pnpm dlx shadcn@latest view @dots/button @acme/auth

Options

Usage: shadcn view [options] <items...>
 
view items from the registry
 
Arguments:
  items            the item names or URLs to view
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -h, --help       display help for command

Use the search command to search for items from registries.

pnpm dlx shadcn@latest search [registry]

You can search with a query:

pnpm dlx shadcn@latest search @dots -q "button"

Or search multiple registries at once:

pnpm dlx shadcn@latest search @dots @acme

The list command is an alias for search:

pnpm dlx shadcn@latest list @acme

Options

Usage: shadcn search|list [options] <registries...>
 
search items from registries
 
Arguments:
  registries             the registry names or urls to search items from. Names
                         must be prefixed with @.
 
Options:
  -c, --cwd <cwd>        the working directory. defaults to the current directory.
  -q, --query <query>    query string
  -l, --limit <number>   maximum number of items to display per registry (default: "100")
  -o, --offset <number>  number of items to skip (default: "0")
  -h, --help             display help for command

build

Use the build command to generate the registry JSON files.

pnpm dlx shadcn@latest build

This command reads the registry.json file and generates the registry JSON files in the public/r directory.

Options

Usage: shadcn build [options] [registry]
 
build components for a shadcn registry
 
Arguments:
  registry             path to registry.json file (default: "./registry.json")
 
Options:
  -o, --output <path>  destination directory for json files (default: "./public/r")
  -c, --cwd <cwd>      the working directory. defaults to the current directory.
  -h, --help           display help for command

To customize the output directory, use the --output option.

pnpm dlx shadcn@latest build --output ./public/registry

docs

Use the docs command to fetch documentation and API references for components.

pnpm dlx shadcn@latest docs [component]

Options

Usage: shadcn docs [options] [component]
 
fetch documentation and API references for components
 
Arguments:
  component          the component to get docs for
 
Options:
  -c, --cwd <cwd>    the working directory. defaults to the current directory.
  -b, --base <base>  the base to use: base, radix, or aria. defaults to project base.
  --json             output as JSON. (default: false)
  -h, --help         display help for command

info

Use the info command to get information about your project.

pnpm dlx shadcn@latest info

Options

Usage: shadcn info [options]
 
get information about your project
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  --json            output as JSON. (default: false)
  -h, --help        display help for command

migrate

Use the migrate command to run migrations on your project.

pnpm dlx shadcn@latest migrate [migration]

Available Migrations

MigrationDescription
cnMigrate clsx and tailwind-merge to cn.
iconsMigrate your UI components to a different icon library.
base-colorMigrate your theme to a different base color.
rtlMigrate your components to support RTL (right-to-left).

Options

Usage: shadcn migrate [options] [migration] [path]
 
run a migration.
 
Arguments:
  migration          the migration to run.
  path               optional path or glob pattern to migrate.
 
Options:
  -c, --cwd <cwd>    the working directory. defaults to the current directory.
  -l, --list         list all migrations. (default: false)
  -y, --yes          skip confirmation prompt. (default: false)
  -f, --from <name>  the base color or icon library to migrate from.
  -t, --to <name>    the base color or icon library to migrate to.
  -h, --help         display help for command

migrate cn

The cn migration replaces clsx, tailwind-merge and cnfast with cn.

pnpm dlx shadcn@latest migrate cn

Unlike the other migrations, migrate cn does not require a components.json file. You can run it in any JavaScript or TypeScript package project using Tailwind CSS v4.

This will:

  1. Rewrite imports from clsx, clsx/lite, tailwind-merge and cnfast.
  2. Replace twMerge(clsx(...)) compositions with direct cn(...) calls.
  3. Replace the standard shadcn utility with a direct re-export.
  4. Install cn and remove the old packages when no references remain.

Before

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

After

export { cn } from "cn"

The migration also preserves separate APIs when they are used independently:

- import { clsx } from "clsx"
- import { twMerge } from "tailwind-merge"
+ import { clsx, twMerge } from "cn"

Because cnfast has the same root API, its module specifiers are replaced directly:

- import { cn } from "cnfast"
+ import { cn } from "cn"

Custom configuration APIs are moved to cn/config. Existing local names are preserved when an export was renamed:

- import { createTailwindMerge, getDefaultConfig } from "tailwind-merge"
+ import {
+   createTwMerge as createTailwindMerge,
+   defaultConfig as getDefaultConfig,
+ } from "cn/config"

Migrate specific files

You can migrate a file, directory or glob pattern:

# Migrate a specific file.
npx shadcn@latest migrate cn src/lib/utils.ts
 
# Migrate files matching a glob pattern.
npx shadcn@latest migrate cn "src/**/*.{ts,tsx}"

Scoped migrations install cn but keep clsx, tailwind-merge and cnfast in package.json, because files outside the selected path may still use them.

The command leaves unsupported imports unchanged and reports them for manual review. This includes experimentalParseClassName, namespace imports, dynamic import shapes, direct calls to validators and variadic createTailwindMerge calls that cannot be migrated safely. An old dependency is retained whenever one of its references remains.

migrate icons

The icons migration moves your components from one icon library to another.

pnpm dlx shadcn@latest migrate icons

This will prompt you for the source and target libraries, rewrite icon imports and JSX usage in your ui directory, install the target library and update iconLibrary in your components.json so future npx shadcn add installs use the new library.

The following libraries are supported: lucide, tabler, hugeicons, phosphor, remixicon and radix (legacy).

Non-interactive

Use --from and --to to skip the prompts:

pnpm dlx shadcn@latest migrate icons --from lucide --to phosphor --yes

Migrate specific files

You can migrate specific files or use glob patterns. Scoped runs do not update components.json.

# Migrate a specific file.
npx shadcn@latest migrate icons src/components/ui/button.tsx --from lucide --to tabler
 
# Migrate files matching a glob pattern.
npx shadcn@latest migrate icons "src/components/**" --from lucide --to tabler

Icons without an equivalent in the target library are left untouched and reported at the end of the migration.

migrate base-color

The base-color migration switches your theme from one base color to another.

pnpm dlx shadcn@latest migrate base-color

This will prompt you for the source and target base colors, rewrite the theme CSS variables (the CSS file configured by tailwind.css in your components.json) and update baseColor so future npx shadcn add installs use the new base color.

The following base colors are supported: neutral, zinc, stone, mauve, olive, mist and taupe.

Non-interactive

Use --to to migrate from the current baseColor in your components.json, or pass both --from and --to explicitly.

pnpm dlx shadcn@latest migrate base-color --to zinc --yes

Theme tokens that no longer match the source base color are left untouched and reported at the end of the migration.

migrate rtl

The rtl migration transforms your components to support RTL (right-to-left) languages.

pnpm dlx shadcn@latest migrate rtl

This will:

  1. Update components.json to set rtl: true
  2. Transform physical CSS properties to logical equivalents (e.g., ml-4 → ms-4, text-left → text-start)
  3. Add rtl: variants where needed (e.g., space-x-4 → space-x-4 rtl:space-x-reverse)

Migrate specific files

You can migrate specific files or use glob patterns:

# Migrate a specific file
npx shadcn@latest migrate rtl src/components/ui/button.tsx
 
# Migrate files matching a glob pattern
npx shadcn@latest migrate rtl "src/components/ui/**"

If no path is provided, the migration will transform all files in your ui directory (from components.json).

eject

When you run init, shadcn adds @import "shadcn/tailwind.css" to your global CSS file. This import provides shared Tailwind v4 utilities such as custom variants (data-open:, data-closed:, etc.) and accordion animations.

Use the eject command to inline shadcn/tailwind.css into your global CSS file and remove the shadcn dependency from your project.

pnpm dlx shadcn@latest eject

Before

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

After

@import "tailwindcss";
@import "tw-animate-css";
/* ejected from shadcn@4.8.3 */
@theme inline {
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(
        --radix-accordion-content-height,
        var(--accordion-panel-height, auto)
      );
    }
  }
}
 
@custom-variant data-open {
  &:where([data-state="open"]),
  &:where([data-open]:not([data-open="false"])) {
    @slot;
  }
}
 
@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
 
  &::-webkit-scrollbar {
    display: none;
  }
}

Monorepo

In a monorepo, run the command from the workspace that contains your components.json and global CSS file:

pnpm dlx shadcn@latest eject -c packages/ui

Options

Usage: shadcn eject [options]
 
inline shadcn/tailwind.css and remove the shadcn dependency
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -y, --yes        skip confirmation prompt. (default: false)
  -s, --silent     mute output. (default: false)
  -h, --help       display help for command