125k

CLI

PreviousNext

shadcn CLI を使用してコンポーネントをプロジェクトに追加します。

init

init コマンドを使用して、既存のプロジェクトの構成と依存関係を初期化するか、--name で新しいプロジェクトを作成します。

init コマンドは、依存関係をインストールし、cn ユーティリティを追加し、プロジェクトの CSS 変数を構成します。

pnpm dlx shadcn@latest init

オプション

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

create コマンドは init のエイリアスです。

pnpm dlx shadcn@latest create

add

add コマンドを使用して、コンポーネントと依存関係をプロジェクトに追加します。

pnpm dlx shadcn@latest add [component]

オプション

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

apply

apply コマンドを使って既存のプロジェクトにプリセットを適用します。

pnpm dlx shadcn@latest apply a2r6bw

UI コンポーネントを再インストールせずに、プリセットのテーマまたはフォントのみを適用できます。

pnpm dlx shadcn@latest apply a2r6bw --only theme

--only でサポートされている値は theme と font です。

オプション

Usage: shadcn apply [options] [preset]
 
apply a preset to an existing project
 
Arguments:
  preset             the preset to apply
 
Options:
  --preset <preset>  preset configuration to apply
  --only [parts]     apply only parts of a preset: theme, font
  -y, --yes          skip confirmation prompt. (default: false)
  -c, --cwd <cwd>    the working directory. defaults to the current directory.
  -s, --silent       mute output. (default: false)
  -h, --help         display help for command

preset

preset コマンドを使用して、プリセット コードを検査し、既存のプロジェクトのプリセットを解決します。

pnpm dlx shadcn@latest preset decode a2r6bw

preset decode

preset decode を使用してプリセット コードをデコードします。

pnpm dlx shadcn@latest preset decode a2r6bw

オプション

Usage: shadcn preset decode [options] <code>
 
decode a preset code
 
Arguments:
  code        the preset code to decode
 
Options:
  --json      output as JSON. (default: false)
  -h, --help  display help for command

preset resolve

preset resolve を使って現在のプロジェクトからプリセットを解決します。

pnpm dlx shadcn@latest preset resolve

preset info コマンドは preset resolve のエイリアスです。

pnpm dlx shadcn@latest preset info

オプション

Usage: shadcn preset resolve|info [options]
 
resolve a preset from 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

preset url

preset url を使用して、プリセット コードの作成 URL を出力します。

pnpm dlx shadcn@latest preset url a2r6bw

オプション

Usage: shadcn preset url [options] <code>
 
get the create URL for a preset code
 
Arguments:
  code        the preset code
 
Options:
  -h, --help  display help for command

preset open

preset open を使用して、ブラウザでプリセット コードを開きます。

pnpm dlx shadcn@latest preset open a2r6bw

オプション

Usage: shadcn preset open [options] <code>
 
open a preset code in the browser
 
Arguments:
  code        the preset code
 
Options:
  -h, --help  display help for command

view

view コマンドを使用して、インストール前にレジストリの項目を表示します。

pnpm dlx shadcn@latest view [item]

複数の項目を一度に表示できます。

pnpm dlx shadcn@latest view button card dialog

または、名前空間レジストリの項目を表示します。

pnpm dlx shadcn@latest view @acme/auth @v0/dashboard

オプション

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

search コマンドを使用して、レジストリから項目を検索します。

pnpm dlx shadcn@latest search [registry]

クエリを指定して検索できます。

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

複数のレジストリを一度に検索することもできます。

pnpm dlx shadcn@latest search @shadcn @v0 @acme

list コマンドは search のエイリアスです。

pnpm dlx shadcn@latest list @acme

オプション

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

build コマンドを使用して、レジストリ JSON ファイルを生成します。

pnpm dlx shadcn@latest build

このコマンドは、registry.json ファイルを読み取り、public/r ディレクトリにレジストリ JSON ファイルを生成します。

オプション

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

出力ディレクトリをカスタマイズするには、--output オプションを使用します。

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

docs

docs コマンドを使ってコンポーネントのドキュメントと API リファレンスを取得します。

pnpm dlx shadcn@latest docs [component]

オプション

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

info コマンドを使ってプロジェクトの情報を取得します。

pnpm dlx shadcn@latest info

オプション

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

migrate コマンドを使用して、プロジェクトで移行を実行します。

pnpm dlx shadcn@latest migrate [migration]

利用可能な移行

移行説明
cnclsx と tailwind-merge を cn に移行します。
iconsUI コンポーネントを別のアイコン ライブラリに移行します。
base-colorテーマを別の基本色に移行します。
radixradix-ui に移行します。
rtlRTL（右から左）の言語に対応するようコンポーネントを移行します。

オプション

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

cn 移行は clsx、tailwind-merge、cnfast を cn に置き換えます。

pnpm dlx shadcn@latest migrate cn

他の移行とは異なり、migrate cn には components.json ファイルは必要ありません。 Tailwind CSS v4 を使用して、任意の JavaScript または TypeScript パッケージ プロジェクトで実行できます。

これは次のことを行います:

  1. clsx、clsx/lite、tailwind-merge、cnfast からのインポートを書き換えます。
  2. twMerge(clsx(...)) 構成を直接 cn(...) 呼び出しに置き換えます。
  3. 標準の shadcn ユーティリティを直接再エクスポートに置き換えます。
  4. cn をインストールし、参照が残っていなければ古いパッケージを削除します。

変更前

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

変更後

export { cn } from "cn"

この移行では、個別に使用されている場合、個別の API もそのまま保持されます:

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

cnfast は同じルート API を持っているため、そのモジュール指定子は直接置き換えられます。

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

カスタム構成 API は cn/config に移動されました。エクスポートの名前が変更された場合、既存のローカル名は保持されます。

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

特定のファイルを移行します

ファイル、ディレクトリ、またはグロブ パターンを移行できます:

# 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}"

対象を限定した移行では cn をインストールしますが、選択したパスの外にあるファイルが使用している可能性があるため、package.json の clsx、tailwind-merge、cnfast は残します。

このコマンドは、サポートされていないインポートを変更せずに残し、手動レビューのためにレポートします。これには、experimentalParseClassName、名前空間インポート、動的インポート形状、validators への直接呼び出し、および安全に移行できない可変引数 createTailwindMerge 呼び出しが含まれます。古い依存関係は、その参照の 1 つが残っている場合は常に保持されます。

migrate icons

icons 移行はコンポーネントをあるアイコン ライブラリから別のライブラリへ移行します。

pnpm dlx shadcn@latest migrate icons

移行元と移行先のライブラリを尋ね、ui ディレクトリのアイコン インポートと JSX の使用箇所を書き換え、移行先ライブラリをインストールします。また、今後の npx shadcn add で新しいライブラリが使われるよう components.json の iconLibrary を更新します。

次のライブラリに対応しています: lucide、tabler、hugeicons、phosphor、remixicon、radix（レガシー）。

非対話モード

--from および --to を使用して、プロンプトをスキップします。

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

特定のファイルを移行します

特定のファイルを移行したり、グロブ パターンを使用したりできます。対象を限定した実行では 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

ターゲット ライブラリに同等のアイコンがないアイコンはそのまま残され、移行の終了時に報告されます。

migrate base-color

base-color の移行により、テーマがある基本色から別の基本色に切り替わります。

pnpm dlx shadcn@latest migrate base-color

これにより、ソースとターゲットの基本色の入力を求められ、テーマの CSS 変数 (components.json 内の tailwind.css によって構成された CSS ファイル) を書き換えて、将来の npx shadcn add のインストールで新しい基本色が使用されるように baseColor を更新します。

次の基本色に対応しています: neutral、zinc、stone、mauve、olive、mist、taupe。

非対話モード

components.json の現在の baseColor から移行するには --to を使うか、--from と --to の両方を明示的に渡します。

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

ソースのベース カラーと一致しなくなったテーマ トークンはそのまま残され、移行の最後にレポートされます。

migrate rtl

rtl 移行は RTL（右から左）の言語に対応するようコンポーネントを変換します。

pnpm dlx shadcn@latest migrate rtl

これは次のことを行います:

  1. components.json を更新して rtl: true を設定します。
  2. 物理的な CSS プロパティを論理的な同等のプロパティに変換します (例: ml-4 → ms-4、text-left → text-start)
  3. 必要に応じて rtl: バリアントを追加します (例: space-x-4 → space-x-4 rtl:space-x-reverse)

特定のファイルを移行します

特定のファイルを移行したり、グロブ パターンを使用したりできます:

# 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/**"

パスを指定しない場合、components.json の ui ディレクトリにあるすべてのファイルを変換します。

migrate radix

radix の移行により、個別の @radix-ui/react-* パッケージからのインポートが、統合された radix-ui パッケージへ更新されます。

pnpm dlx shadcn@latest migrate radix

これは次のことを行います:

  1. @radix-ui/react-* から radix-ui へインポートを変換します。
  2. radix-ui パッケージを package.json に追加します。

変更前

import * as DialogPrimitive from "@radix-ui/react-dialog"
import * as SelectPrimitive from "@radix-ui/react-select"

変更後

import { Dialog as DialogPrimitive, Select as SelectPrimitive } from "radix-ui"

特定のファイルを移行します

特定のファイルを移行したり、グロブ パターンを使用したりできます:

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

パスを指定しない場合、components.json の ui ディレクトリにあるすべてのファイルを変換します。

完了したら、未使用の @radix-ui/react-* パッケージを package.json から削除できます。

eject

init を実行すると、shadcn は @import "shadcn/tailwind.css" をグローバル CSS ファイルに追加します。このインポートは、カスタム バリアント (data-open:、data-closed: など) やアコーディオン アニメーションなどの共有 Tailwind v4 ユーティリティを提供します。

eject コマンドを使用して、shadcn/tailwind.css をグローバル CSS ファイルにインライン化し、プロジェクトから shadcn 依存関係を削除します。

pnpm dlx shadcn@latest eject

変更前

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

変更後

@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;
  }
}

モノリポジトリ

モノリポジトリでは、components.json およびグローバル CSS ファイルを含むワークスペースからコマンドを実行します。

pnpm dlx shadcn@latest eject -c packages/ui

オプション

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