UI とテーマ

組み込み UI キットを import する。styles.css でテーマトークンを上書きする。add でソースをコピーする。

Vantage は shadcn/ui（Base UI 版）と、Tailwind v4 ベースのテーマを同梱しています。設定不要ですぐ使えます。

UI キットを使う

入り口は 2 つです。shadcn/ui のプリミティブは @squadbase/vantage/ui、それらを組み上げたダッシュボード部品は @squadbase/vantage/components から import します。

import { Button } from "@squadbase/vantage/ui";
import { DashboardCardPreset, MetricValue } from "@squadbase/vantage/components";

export default function Overview() {
  return (
    <div className="grid gap-4 p-6 md:grid-cols-3">
      <DashboardCardPreset title="売上">
        <MetricValue className="my-0">¥1,240,000</MetricValue>
      </DashboardCardPreset>
      <DashboardCardPreset title="新規顧客">
        <MetricValue className="my-0">128</MetricValue>
      </DashboardCardPreset>
      <DashboardCardPreset title="解約率">
        <MetricValue className="my-0">2.1%</MetricValue>
      </DashboardCardPreset>
    </div>
  );
}

/ui にあるもの（抜粋）: Button、Card、Table プリミティブ、Tabs、Input / Select / Checkbox / Switch / Slider、Calendar、Dialog / Sheet / Popover / Tooltip / DropdownMenu、Sidebar、Alert / Skeleton / Spinner、Loading / Empty / ErrorState。

/components にあるもの（抜粋）: PageShell、AppShell、DashboardCard、DataTable、 EChart、FunnelSteps、FilterBar、DateRangePicker、MetricValue、TrendIndicator。

各コンポーネントの props と使い方はコンポーネントタブにまとめてあります。

Tailwind はそのまま使える

className に Tailwind ユーティリティを書くだけで効きます。tailwind.config も postcss.config も書きません（書くと禁止ファイルとしてエラーになります）。クラス結合には cn() が使えます。

import { cn } from "@squadbase/vantage/ui";

<div className={cn("p-4", isActive && "bg-accent")} />;

テーマトークンを上書きする

色や角丸などのデザイントークンは CSS 変数です。上書きしたいときは、ページと同じ側に styles.css を置き、CSS 変数だけを上書きします ― src/ があれば src/styles.css、無ければプロジェクトルート直下（→ ページを置く場所）。このファイルはテーマの後に自動 import されます。

/* styles.css — CSS 変数の上書きのみ */
:root {
  --primary: oklch(0.55 0.22 265);
}
.dark,
[data-theme="dark"] {
  --primary: oklch(0.72 0.19 265);
}

トークンは shadcn/ui の neutral パレット（oklch）に、チャート用の --chart-1 〜 --chart-5 とサイドバー用の --sidebar-* を足したものです。--chart-* を変えると EChart の配色も一緒に変わります。チャートは CSS 変数を実際に読み取ってテーマを組み立てるためです。

ダークモードは opt-in

ダークのトークンが効くのは、祖先に .dark か [data-theme="dark"] が付いているときだけです。 OS やブラウザの設定（prefers-color-scheme）は見ません ― ダッシュボードは埋め込み先の明暗に勝手に追従しないほうが読めるため、切り替えはアプリ側の明示的な指定に任せています。

dark: ユーティリティも同じスイッチに繋がっています（theme.css が @custom-variant dark でそう定義しています）。.dark が無ければ dark: は一切効かないので、トークンだけライトで dark: だけダーク、という食い違いは起きません。

// `.dark` が付いていなければ、下段のクラスは効かない
<div className="text-foreground dark:text-slate-100" />

ソースを編集したいとき: `vantage add`

コンポーネントの中身を自分のものにしたいときは、編集可能なソースを components/ にコピーします。

vantage add ui data-table      # 編集可能な DataTable をコピー
vantage add block sales-overview

次に読む

コンポーネント — 全コンポーネントの props リファレンス
CLI リファレンス — 全コマンド