【備忘録】shadcn/uiの初期設定を解説

はじめに

shadcn/uiのインストール時に聞かれる内容を噛み砕いてまとめておく。

インストール

使用するFWに合わせて。

npx shadcn-ui@latest init

初期設定

テーマの選択

? Which style would you like to use? › - Use arrow-keys. Return to submit.
❯   Default
    New York

下記を比較してみてください。

• Defaultテーマのサンプル
• New Yorkテーマのサンプル

ベースカラーの選択

? Which color would you like to use as base color? › - Use arrow-keys. Return to submit.
❯   Slate
    Gray
    Zinc
    Neutral
    Stone

色の設定としてCSS変数を使うかどうか

? Would you like to use CSS variables for colors? › no / yes

設定の変更方法

インストールすると、components.jsonファイルが生成されます。
書き換えることで設定を変更することもできます。

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

参考