125k

例

PreviousNext

レジストリアイテムの例: スタイル、コンポーネント、CSS 変数など。

registry:style

shadcn/ui を拡張するカスタムスタイル

以下のレジストリアイテムは、shadcn/ui を拡張するカスタムスタイルです。npx shadcn init を実行すると、次の処理が行われます：

  • @tabler/icons-react を依存関係としてインストールします。
  • login-01 ブロックと calendar コンポーネントをプロジェクトに追加します。
  • リモートレジストリから editor を追加します。
  • font-sans 変数に Inter, sans-serif を設定します。
  • ライトモードとダークモードに brand カラーをインストールします。
example-style.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "example-style",
  "type": "registry:style",
  "dependencies": ["@tabler/icons-react"],
  "registryDependencies": [
    "login-01",
    "calendar",
    "https://example.com/r/editor.json"
  ],
  "cssVars": {
    "theme": {
      "font-sans": "Inter, sans-serif"
    },
    "light": {
      "brand": "20 14.3% 4.1%"
    },
    "dark": {
      "brand": "20 14.3% 4.1%"
    }
  }
}

スクラッチから作成するカスタムスタイル

以下のレジストリアイテムは、shadcn/ui を拡張しないカスタムスタイルです。extends: none フィールドを参照してください。

新しいスタイルをスクラッチから作成するために使用できます（カスタムコンポーネント、CSS 変数、依存関係など）。

npx shadcn add を実行すると、次の処理が行われます：

  • cn を依存関係としてインストールします。
  • shadcn/ui レジストリから utils レジストリアイテムを追加します。
  • リモートレジストリから button、input、label、select コンポーネントを追加します。
  • 新しい CSS 変数 main、bg、border、text、ring をインストールします。
example-style.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "new-style",
  "type": "registry:style",
  "dependencies": ["cn"],
  "registryDependencies": [
    "utils",
    "https://example.com/r/button.json",
    "https://example.com/r/input.json",
    "https://example.com/r/label.json",
    "https://example.com/r/select.json"
  ],
  "cssVars": {
    "theme": {
      "font-sans": "Inter, sans-serif"
    },
    "light": {
      "main": "#88aaee",
      "bg": "#dfe5f2",
      "border": "#000",
      "text": "#000",
      "ring": "#000"
    },
    "dark": {
      "main": "#88aaee",
      "bg": "#272933",
      "border": "#000",
      "text": "#e6e6e6",
      "ring": "#fff"
    }
  }
}

registry:theme

カスタムテーマ

example-theme.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-theme",
  "type": "registry:theme",
  "cssVars": {
    "light": {
      "background": "oklch(1 0 0)",
      "foreground": "oklch(0.141 0.005 285.823)",
      "primary": "oklch(0.546 0.245 262.881)",
      "primary-foreground": "oklch(0.97 0.014 254.604)",
      "ring": "oklch(0.746 0.16 232.661)",
      "sidebar-primary": "oklch(0.546 0.245 262.881)",
      "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
      "sidebar-ring": "oklch(0.746 0.16 232.661)"
    },
    "dark": {
      "background": "oklch(1 0 0)",
      "foreground": "oklch(0.141 0.005 285.823)",
      "primary": "oklch(0.707 0.165 254.624)",
      "primary-foreground": "oklch(0.97 0.014 254.604)",
      "ring": "oklch(0.707 0.165 254.624)",
      "sidebar-primary": "oklch(0.707 0.165 254.624)",
      "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
      "sidebar-ring": "oklch(0.707 0.165 254.624)"
    }
  }
}

カスタムカラー

以下のスタイルは、shadcn/ui のデフォルト設定で初期化した後に、カスタムの brand カラーを追加します。

example-style.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-style",
  "type": "registry:style",
  "cssVars": {
    "light": {
      "brand": "oklch(0.99 0.00 0)"
    },
    "dark": {
      "brand": "oklch(0.14 0.00 286)"
    }
  }
}

registry:block

カスタムブロック

このブロックは、shadcn/ui レジストリから login-01 ブロックをインストールします。

login-01.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "login-01",
  "type": "registry:block",
  "description": "A simple login form.",
  "registryDependencies": ["button", "card", "input", "label"],
  "files": [
    {
      "path": "blocks/login-01/page.tsx",
      "content": "import { LoginForm } ...",
      "type": "registry:page",
      "target": "app/login/page.tsx"
    },
    {
      "path": "blocks/login-01/components/login-form.tsx",
      "content": "...",
      "type": "registry:component"
    }
  ]
}

ブロックをインストールしてプリミティブを上書きする

shadcn/ui レジストリからブロックをインストールし、カスタムのプリミティブで上書きできます。

npx shadcn add を実行すると、次の処理が行われます：

  • shadcn/ui レジストリから login-01 ブロックを追加します。
  • button、input、label プリミティブをリモートレジストリのものに置き換えます。
example-style.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-login",
  "type": "registry:block",
  "registryDependencies": [
    "login-01",
    "https://example.com/r/button.json",
    "https://example.com/r/input.json",
    "https://example.com/r/label.json"
  ]
}

registry:ui

UI コンポーネント

registry:ui アイテムは、再利用可能な UI コンポーネントです。依存関係、レジストリ依存関係、CSS 変数を持たせることができます。

button.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:ui",
  "dependencies": ["radix-ui"],
  "files": [
    {
      "path": "ui/button.tsx",
      "content": "...",
      "type": "registry:ui"
    }
  ]
}

CSS 変数付きの UI コンポーネント

sidebar.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "type": "registry:ui",
  "dependencies": ["radix-ui"],
  "registryDependencies": ["button", "separator", "sheet", "tooltip"],
  "files": [
    {
      "path": "ui/sidebar.tsx",
      "content": "...",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "light": {
      "sidebar-background": "oklch(0.985 0 0)",
      "sidebar-foreground": "oklch(0.141 0.005 285.823)",
      "sidebar-border": "oklch(0.92 0.004 286.32)"
    },
    "dark": {
      "sidebar-background": "oklch(0.141 0.005 285.823)",
      "sidebar-foreground": "oklch(0.985 0 0)",
      "sidebar-border": "oklch(0.274 0.006 286.033)"
    }
  }
}

registry:lib

ユーティリティライブラリ

registry:lib アイテムはユーティリティライブラリです。ヘルパー関数や定数、その他の非コンポーネントコードを共有するために使用します。

utils.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "utils",
  "type": "registry:lib",
  "dependencies": ["cn"],
  "files": [
    {
      "path": "lib/utils.ts",
      "content": "export { cn } from \"cn\"",
      "type": "registry:lib"
    }
  ]
}

registry:hook

カスタムフック

registry:hook アイテムはカスタム React フックです。

use-mobile.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-mobile",
  "type": "registry:hook",
  "files": [
    {
      "path": "hooks/use-mobile.ts",
      "content": "...",
      "type": "registry:hook"
    }
  ]
}

依存関係付きのフック

use-debounce.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-debounce",
  "type": "registry:hook",
  "dependencies": ["react"],
  "files": [
    {
      "path": "hooks/use-debounce.ts",
      "content": "...",
      "type": "registry:hook"
    }
  ]
}

ターゲットプレースホルダー

レジストリアイテムがユーザーの設定済み shadcn ディレクトリ配下にファイルをインストールする場合は、files[].target プレースホルダーを使用します。利用可能なプレースホルダーは @components/、@ui/、@lib/、@hooks/ です。

プレースホルダーは components.json から解決されるため、同じレジストリアイテムが @/、カスタム TypeScript エイリアス、パッケージインポート、ワークスペースパッケージのエクスポートを使用するプロジェクトでも動作します。

プレースホルダー以降の部分は保持されます。たとえば、@ui/ai/prompt-input.tsx は、ユーザーの設定済み ui ディレクトリ配下の ai/prompt-input.tsx にインストールされます。

alias-child.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alias-child",
  "type": "registry:item",
  "files": [
    {
      "path": "registry/new-york/alias/target-alias-button.tsx",
      "type": "registry:ui",
      "target": "@ui/target-alias-button.tsx",
      "content": "..."
    },
    {
      "path": "registry/new-york/alias/target-alias-helper.ts",
      "type": "registry:lib",
      "target": "@lib/target-alias-helper.ts",
      "content": "..."
    },
    {
      "path": "registry/new-york/alias/prompt-input.tsx",
      "type": "registry:ui",
      "target": "@ui/ai/prompt-input.tsx",
      "content": "..."
    }
  ]
}

レジストリ依存関係でもターゲットプレースホルダーを使用できます。以下の例では、子アイテムが UI コンポーネントとヘルパーをインストールし、親アイテムがアプリコンポーネントとフックをインストールします。

alias-parent.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alias-parent",
  "type": "registry:item",
  "registryDependencies": ["https://example.com/r/alias-child.json"],
  "files": [
    {
      "path": "registry/new-york/alias/target-alias-panel.tsx",
      "type": "registry:component",
      "target": "@components/target-alias-panel.tsx",
      "content": "..."
    },
    {
      "path": "registry/new-york/alias/use-target-alias.ts",
      "type": "registry:hook",
      "target": "@hooks/use-target-alias.ts",
      "content": "..."
    }
  ]
}

target は、ファイルの type と異なる場合でも、ファイルの書き込み先を制御します。

type-mismatch.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "type-mismatch",
  "type": "registry:item",
  "files": [
    {
      "path": "registry/new-york/example/format-date.ts",
      "type": "registry:ui",
      "target": "@lib/format-date.ts",
      "content": "..."
    }
  ]
}

registry:font

カスタムフォント

registry:font アイテムは Google フォントをインストールします。font フィールドは必須で、フォントファミリー、プロバイダー、インポート名、CSS 変数を設定します。

font-inter.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "font-inter",
  "type": "registry:font",
  "font": {
    "family": "'Inter Variable', sans-serif",
    "provider": "google",
    "import": "Inter",
    "variable": "--font-sans",
    "subsets": ["latin"],
    "dependency": "@fontsource-variable/inter"
  }
}

等幅フォント

font-jetbrains-mono.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "font-jetbrains-mono",
  "type": "registry:font",
  "font": {
    "family": "'JetBrains Mono Variable', monospace",
    "provider": "google",
    "import": "JetBrains_Mono",
    "variable": "--font-mono",
    "weight": ["400", "500", "600", "700"],
    "subsets": ["latin"],
    "dependency": "@fontsource-variable/jetbrains-mono"
  }
}

セリフフォント

font-lora.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "font-lora",
  "type": "registry:font",
  "font": {
    "family": "'Lora Variable', serif",
    "provider": "google",
    "import": "Lora",
    "variable": "--font-serif",
    "subsets": ["latin"],
    "dependency": "@fontsource-variable/lora"
  }
}

カスタムセレクター付きフォント

全体の html ではなく特定の CSS セレクターにフォントを適用する場合は、selector フィールドを使用します。見出し用フォントなど、対象を絞ってフォントを適用したい場合に便利です。

font-playfair-display.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "font-playfair-display",
  "type": "registry:font",
  "font": {
    "family": "'Playfair Display Variable', serif",
    "provider": "google",
    "import": "Playfair_Display",
    "variable": "--font-heading",
    "subsets": ["latin"],
    "selector": "h1, h2, h3, h4, h5, h6",
    "dependency": "@fontsource-variable/playfair-display"
  }
}

selector を設定すると、フォントユーティリティクラス（例：font-heading）は <html> 要素に追加される代わりに、@layer base 内で指定したセレクターに対して CSS の @apply で適用されます。CSS 変数は引き続き <html> に注入されるため、グローバルに利用できます。

registry:base

カスタムベース

registry:base アイテムは、完全なデザインシステムのベースです。プロジェクト向けに、依存関係一式、CSS 変数、設定を定義します。config フィールドは registry:base アイテム固有のものです。

config フィールドでは以下のプロパティを使用できます（すべて任意です）：

プロパティ型説明
stylestringベースのスタイル名です。
iconLibrarystring使用するアイコンライブラリです（例：lucide）。
rscbooleanReact Server Components を有効化します。既定値は false です。
tsxbooleanTypeScript を使用します。既定値は true です。
rtlboolean右から左（RTL）表示を有効化します。既定値は false です。
menuColor"default" | "inverted" | "default-translucent" | "inverted-translucent"メニューの配色です。既定値は "default" です。
menuAccent"subtle" | "bold"メニューのアクセントスタイルです。既定値は "subtle" です。
tailwind.baseColorstringベースカラー名です（例：neutral、slate、zinc）。
tailwind.cssstringTailwind CSS ファイルへのパスです。
tailwind.prefixstringすべての Tailwind クラスに付加するプレフィックスです。
aliases.componentsstringコンポーネント用のインポートエイリアスです。
aliases.utilsstringユーティリティ用のインポートエイリアスです。
aliases.uistringUI コンポーネント用のインポートエイリアスです。
aliases.libstringlib 用のインポートエイリアスです。
aliases.hooksstringhooks 用のインポートエイリアスです。
registriesRecord<string, string | object>カスタムレジストリの URL です。キーは @ で始める必要があります。
custom-base.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-base",
  "type": "registry:base",
  "config": {
    "style": "custom-base",
    "iconLibrary": "lucide",
    "tailwind": {
      "baseColor": "neutral"
    }
  },
  "dependencies": [
    "class-variance-authority",
    "tw-animate-css",
    "lucide-react"
  ],
  "registryDependencies": ["utils", "font-inter"],
  "cssVars": {
    "light": {
      "background": "oklch(1 0 0)",
      "foreground": "oklch(0.141 0.005 285.823)",
      "primary": "oklch(0.21 0.006 285.885)",
      "primary-foreground": "oklch(0.985 0 0)"
    },
    "dark": {
      "background": "oklch(0.141 0.005 285.823)",
      "foreground": "oklch(0.985 0 0)",
      "primary": "oklch(0.985 0 0)",
      "primary-foreground": "oklch(0.21 0.006 285.885)"
    }
  },
  "css": {
    "@import \"tw-animate-css\"": {},
    "@layer base": {
      "*": {
        "@apply border-border outline-ring/50": {}
      },
      "body": {
        "@apply bg-background text-foreground": {}
      }
    }
  }
}

スクラッチからのベース

shadcn/ui のデフォルトを継承しないベースを作成する場合は、extends: none を使用します。

custom-base.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "my-design-system",
  "extends": "none",
  "type": "registry:base",
  "config": {
    "style": "my-design-system",
    "iconLibrary": "lucide",
    "tailwind": {
      "baseColor": "slate"
    }
  },
  "dependencies": ["cn", "tw-animate-css", "lucide-react"],
  "registryDependencies": ["utils", "font-geist"],
  "cssVars": {
    "light": {
      "background": "oklch(1 0 0)",
      "foreground": "oklch(0.141 0.005 285.823)"
    },
    "dark": {
      "background": "oklch(0.141 0.005 285.823)",
      "foreground": "oklch(0.985 0 0)"
    }
  }
}

共通フィールド

作成者

レジストリアイテムに帰属表示を追加する場合は、author フィールドを使用します。

example-item.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:ui",
  "author": "shadcn",
  "files": [
    {
      "path": "ui/custom-component.tsx",
      "content": "...",
      "type": "registry:ui"
    }
  ]
}

開発用依存関係

パッケージを開発用依存関係としてインストールする場合は、devDependencies フィールドを使用します。

example-item.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-item",
  "type": "registry:item",
  "devDependencies": ["@types/mdx"],
  "files": [
    {
      "path": "lib/mdx.ts",
      "content": "...",
      "type": "registry:lib"
    }
  ]
}

メタデータ

レジストリアイテムに任意のメタデータを付加する場合は、meta フィールドを使用します。ツールやスクリプトで利用するカスタムデータの保存に使用できます。

example-item.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:ui",
  "meta": {
    "category": "forms",
    "version": "2.0.0"
  },
  "files": [
    {
      "path": "ui/custom-component.tsx",
      "content": "...",
      "type": "registry:ui"
    }
  ]
}

CSS 変数

カスタムテーマ変数

theme オブジェクトにカスタムテーマ変数を追加します。

example-theme.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-theme",
  "type": "registry:theme",
  "cssVars": {
    "theme": {
      "font-heading": "Inter, sans-serif",
      "shadow-card": "0 0 0 1px rgba(0, 0, 0, 0.1)"
    }
  }
}

Tailwind CSS 変数を上書きする

example-theme.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-theme",
  "type": "registry:theme",
  "cssVars": {
    "theme": {
      "spacing": "0.2rem",
      "breakpoint-sm": "640px",
      "breakpoint-md": "768px",
      "breakpoint-lg": "1024px",
      "breakpoint-xl": "1280px",
      "breakpoint-2xl": "1536px"
    }
  }
}

カスタム CSS を追加する

ベーススタイル

example-base.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-style",
  "type": "registry:style",
  "css": {
    "@layer base": {
      "h1": {
        "font-size": "var(--text-2xl)"
      },
      "h2": {
        "font-size": "var(--text-xl)"
      }
    }
  }
}

コンポーネント

example-card.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-card",
  "type": "registry:component",
  "css": {
    "@layer components": {
      "card": {
        "background-color": "var(--color-white)",
        "border-radius": "var(--rounded-lg)",
        "padding": "var(--spacing-6)",
        "box-shadow": "var(--shadow-xl)"
      }
    }
  }
}

カスタムユーティリティを追加する

シンプルなユーティリティ

example-component.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:component",
  "css": {
    "@utility content-auto": {
      "content-visibility": "auto"
    }
  }
}

複雑なユーティリティ

example-utility.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:component",
  "css": {
    "@utility scrollbar-hidden": {
      "scrollbar-hidden": {
        "&::-webkit-scrollbar": {
          "display": "none"
        }
      }
    }
  }
}

関数型ユーティリティ

example-functional.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:component",
  "css": {
    "@utility tab-*": {
      "tab-size": "var(--tab-size-*)"
    }
  }
}

CSS インポートを追加する

レジストリアイテムに CSS インポートを追加する場合は @import を使用します。インポートは CSS ファイルの先頭に配置されます。

基本的なインポート

example-import.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-import",
  "type": "registry:component",
  "css": {
    "@import \"tailwindcss\"": {},
    "@import \"./styles/base.css\"": {}
  }
}

url() 構文でのインポート

example-url-import.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "font-import",
  "type": "registry:item",
  "css": {
    "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\")": {},
    "@import url('./local-styles.css')": {}
  }
}

メディアクエリ付きのインポート

example-media-import.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "responsive-import",
  "type": "registry:item",
  "css": {
    "@import \"print-styles.css\" print": {},
    "@import url(\"mobile.css\") screen and (max-width: 768px)": {}
  }
}

カスタムプラグインを追加する

レジストリアイテムに Tailwind プラグインを追加する場合は @plugin を使用します。プラグインはインポートの後、その他のコンテンツの前に自動的に配置されます。

重要： npm パッケージのプラグインを使用する場合は、dependencies 配列にも追加する必要があります。

基本的なプラグインの使用方法

example-plugin.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-plugin",
  "type": "registry:item",
  "css": {
    "@plugin \"@tailwindcss/typography\"": {},
    "@plugin \"foo\"": {}
  }
}

npm 依存関係付きのプラグイン

@tailwindcss/typography のような npm パッケージのプラグインを使用する場合は、依存関係に含めてください。

example-typography.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typography-component",
  "type": "registry:item",
  "dependencies": ["@tailwindcss/typography"],
  "css": {
    "@plugin \"@tailwindcss/typography\"": {},
    "@layer components": {
      ".prose": {
        "max-width": "65ch"
      }
    }
  }
}

スコープ付きプラグインとファイルベースのプラグイン

example-scoped-plugin.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scoped-plugins",
  "type": "registry:component",
  "css": {
    "@plugin \"@headlessui/tailwindcss\"": {},
    "@plugin \"tailwindcss/plugin\"": {},
    "@plugin \"./custom-plugin.js\"": {}
  }
}

複数プラグインの自動順序付け

複数のプラグインを追加すると、自動的にグループ化され、重複が除去されます。

example-multiple-plugins.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multiple-plugins",
  "type": "registry:item",
  "dependencies": [
    "@tailwindcss/typography",
    "@tailwindcss/forms",
    "tw-animate-css"
  ],
  "css": {
    "@plugin \"@tailwindcss/typography\"": {},
    "@plugin \"@tailwindcss/forms\"": {},
    "@plugin \"tw-animate-css\"": {}
  }
}

インポートとプラグインの組み合わせ

@import と @plugin の両方のディレクティブを使用する場合、インポートが先に配置され、次にプラグイン、その後にその他の CSS コンテンツが続きます。

example-combined.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combined-example",
  "type": "registry:item",
  "dependencies": ["@tailwindcss/typography", "tw-animate-css"],
  "css": {
    "@import \"tailwindcss\"": {},
    "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\")": {},
    "@plugin \"@tailwindcss/typography\"": {},
    "@plugin \"tw-animate-css\"": {},
    "@layer base": {
      "body": {
        "font-family": "Inter, sans-serif"
      }
    },
    "@utility content-auto": {
      "content-visibility": "auto"
    }
  }
}

カスタムアニメーションを追加する

注意：アニメーションを使用するには、css に @keyframes と cssVars の theme の両方を定義する必要があります。

example-component.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:component",
  "cssVars": {
    "theme": {
      "--animate-wiggle": "wiggle 1s ease-in-out infinite"
    }
  },
  "css": {
    "@keyframes wiggle": {
      "0%, 100%": {
        "transform": "rotate(-3deg)"
      },
      "50%": {
        "transform": "rotate(3deg)"
      }
    }
  }
}

環境変数を追加する

envVars フィールドを使用して環境変数を追加できます。

example-item.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-item",
  "type": "registry:item",
  "envVars": {
    "NEXT_PUBLIC_APP_URL": "http://localhost:4000",
    "DATABASE_URL": "postgresql://postgres:postgres@localhost:5432/postgres",
    "OPENAI_API_KEY": ""
  }
}

環境変数は .env.local または .env ファイルに追加されます。既存の変数は上書きされません。

ユニバーサルアイテム

2.9.0 以降では、フレームワーク検出や components.json なしでインストールできるユニバーサルアイテムを作成できます。

アイテムをユニバーサル（フレームワーク非依存）にするには、アイテム内のすべてのファイルに明示的な target を指定する必要があります。

以下は python 向けのカスタム Cursor ルールをインストールするレジストリアイテムの例です：

.cursor/rules/custom-python.mdc
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "python-rules",
  "type": "registry:item",
  "files": [
    {
      "path": "/path/to/your/registry/default/custom-python.mdc",
      "type": "registry:file",
      "target": "~/.cursor/rules/custom-python.mdc",
      "content": "..."
    }
  ]
}

以下はカスタム ESLint 設定をインストールする別の例です：

.eslintrc.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "my-eslint-config",
  "type": "registry:item",
  "files": [
    {
      "path": "/path/to/your/registry/default/custom-eslint.json",
      "type": "registry:file",
      "target": "~/.eslintrc.json",
      "content": "..."
    }
  ]
}

複数のファイルをインストールするユニバーサルアイテムも作成できます：

my-custom-starter-template.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "my-custom-starter-template",
  "type": "registry:item",
  "dependencies": ["better-auth"],
  "files": [
    {
      "path": "/path/to/file-01.json",
      "type": "registry:file",
      "target": "~/file-01.json",
      "content": "..."
    },
    {
      "path": "/path/to/file-02.vue",
      "type": "registry:file",
      "target": "~/pages/file-02.vue",
      "content": "..."
    }
  ]
}