creator-plugins-ui

Creator Plugins UI Library

@lottiefiles/creator-plugins-ui — Base UI + Tailwind CSS + CVA で構築された、アクセシビリティに配慮した 25 個のコンポーネントです。プラグインの UI コード（src/）でのみ使用し、プラグインのサンドボックスでは使用しません。

クイックセットアップ

完全なガイド：references/setup-guide.md

npm install @lottiefiles/creator-plugins-ui

// src/main.tsx — import before local styles
import "@lottiefiles/creator-plugins-ui/styles.css";

コンポーネントとテーマカラーのユーティリティクラス（bg-primary、text-foreground、border-border など）は、styles.css だけで使用できます。Tailwind の設定は不要です。

ライブラリが提供するものに加えて、追加のカスタム Tailwind クラスが必要な場合は、Tailwind v4 をセットアップしてください。

npm install --save-dev tailwindcss @tailwindcss/vite

vite.config.ts のプラグインに tailwindcss() を追加し、@import "tailwindcss" を含む src/styles.css を作成して、カスタムカラーには @theme {} を使用します。tailwind.config.js や postcss.config.js（v3 のパターン）は作成しないでください。詳しい手順は references/setup-guide.md を参照してください。

インポートパターン

import { Button, Input, Select, Slider, cn } from "@lottiefiles/creator-plugins-ui";

利用可能なコンポーネント

プロパティ、バリアント、API の詳細については、インストールしたパッケージの TypeScript 型を参照してください。型には JSDoc コメント、明示的なユニオン型、デフォルト値が含まれています。

node_modules/@lottiefiles/creator-plugins-ui/dist/components/*/

コンポーネント： Button、Input、Label、Select、Slider、NumberInput、DualNumberInput、Checkbox、Toggle、RadioGroup、Tabs、Dialog、Dropdown、Tooltip、SegmentedControl、SearchBar、Toast、Spinner、Separator、Card、Grid、EmptyState、Badge、AIPromptInput、ThemeProvider

複合コンポーネント（サブコンポーネントを組み合わせて使用）：Dialog、Select、Dropdown、Tabs、Card、Tooltip、Toast、RadioGroup

複合コンポーネントのパターン

複合コンポーネント（Dialog、Select、Dropdown、Tabs）は、サブコンポーネントを組み合わせて使用します。ポリモーフィックなレンダリングには render プロパティを使用します（asChild ではありません。このライブラリは Radix ではなく Base UI を使用しています）。

<DialogRoot>
  <DialogTrigger render={<Button variant="outline" />}>Delete</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete Layer?</DialogTitle>
      <DialogDescription>This cannot be undone.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
      <Button variant="destructive" onClick={handleDelete}>Delete</Button>
    </DialogFooter>
  </DialogContent>
</DialogRoot>

テーマ設定

完全なガイド：references/theming-guide.md

ダークモード：<html> に class="dark" を追加します。document.documentElement.classList.add("dark")。

ThemeProvider を使った実行時の上書き：

<ThemeProvider tokens={{ "--primary": "hsl(260 80% 55%)" }} themeName="custom">
  <App />
</ThemeProvider>

主な CSS 変数：--background、--foreground、--primary、--secondary、--destructive、--muted-foreground、--border、--ring。

cn() ユーティリティ

ライブラリの cn() を使用してください（ローカルの clsx ではありません）。テーマカラーとフォントサイズ用のカスタム Tailwind マージ設定が含まれています。

import { cn } from "@lottiefiles/creator-plugins-ui";
<div className={cn("p-4 text-foreground", isActive && "bg-primary")} />

よくある落とし穴

1. styles.css のインポート漏れ — コンポーネントにスタイルが適用されません。エントリーファイルで @lottiefiles/creator-plugins-ui/styles.css を一度インポートしてください。
2. v4 での Tailwind v3 設定の使用 — tailwind.config.js や postcss.config.js は作成しないでください。Tailwind v4 では、CSS 内の @import "tailwindcss" と @theme {}、および Vite との統合に @tailwindcss/vite を使用します。
3. render ではなく asChild を使用 — Base UI では Radix の asChild + Slot ではなく、render={<a href="/" />} を使用します。
4. Select の空文字列の値 — "" は「選択なし」を表す予約値です。"none" などを使用してください。
5. NumberInput は制御コンポーネントのみ — value と onChange が必要です。非制御モードはありません。
6. Slider の値は常に配列 — 50 ではなく [50] を渡してください。コールバックも配列を返します。
7. Toast にはプロバイダーが必要 — <ToastProvider> の外で useToast() を呼び出すとエラーになります。アプリのルートをラップしてください。
8. ダークモードのクラスを設定する場所 — dark クラスはコンポーネントではなく、<html> または親要素に設定します。
9. cn のインポート先が誤っている — ローカルの clsx ではなく、@lottiefiles/creator-plugins-ui から cn を使用してください。

カスタムコンポーネントからの移行

変更前と変更後の完全な例：references/setup-guide.md

1. @stitches/react のスタイル付きコンポーネントを、ライブラリのコンポーネントと Tailwind クラスに置き換えます
2. @radix-ui/* のインポートをライブラリのコンポーネントに置き換えます
3. asChild を render プロパティに置き換えます
4. data-[state=checked] → data-[checked]、data-[state=open] → data-[open] などに置き換えます
5. インラインカラーを CSS 変数クラス（text-foreground、bg-primary）に置き換えます
6. カスタムの cn()／clsx() をライブラリの cn() に置き換えます

リファレンスガイド

リファレンス	内容
references/setup-guide.md	インストール、Tailwind の設定、Stitches／Radix からの移行、トラブルシューティング
references/theming-guide.md	CSS 変数、ダークモード、ThemeProvider、カスタムカラー