コンポーネント

Vantage に同梱される shadcn/ui (Base UI) キットと、ダッシュボード用の複合コンポーネントのリファレンス。

Vantage は shadcn/ui をそのまま同梱しています。インストールもコピーも不要で、import するだけで 使えます。公開されている入り口は 3 つで、サイドバーもこの 3 つで区切ってあります。

import { Button, Card, Badge } from "@squadbase/vantage/ui";
import { PageShell, DashboardCardPreset, EChart } from "@squadbase/vantage/components";
import { MarkdownRenderer } from "@squadbase/vantage/markdown";

Base UI ベースであること

同梱しているのは shadcn/ui の Base UI 版です。2026 年 7 月に shadcn/ui は既定のプリミティブを Radix UI から Base UI へ切り替えており、Vantage はその新しい方を採用して います。Radix 版から来た場合、主な違いは次の 4 点です。

• asChild はありません。 代わりに render プロップに要素を渡します。

  // Radix 版
  <PopoverTrigger asChild><Button>開く</Button></PopoverTrigger>
  
  // Base UI 版（Vantage）
  <PopoverTrigger render={<Button />}>開く</PopoverTrigger>

• Checkbox の checked は boolean のみ。 中間状態は indeterminate プロップで表します。

• ToggleGroup の value は配列。 単一選択にしたいときは SegmentedControl を使ってください。

• Select の onValueChange は string | null。 null のガードが 要ります。値とラベルが違うときの items は Vantage 側が SelectItem から自動で組むので、 通常は書かなくて済みます(別コンポーネントが項目を返す形のときだけ明示)。

状態は data-state="open" ではなく data-open / data-checked のような属性で表現されます。 Vantage の theme.css は両方の綴りを受ける custom variant を定義しているので、 data-open:animate-in のようなクラスはどちらの流儀でも書けます。

@squadbase/vantage/ui

shadcn/ui のプリミティブです。名前も props も shadcn/ui のものと同じなので、 shadcn/ui のドキュメント もそのまま参考になります。 サイドバーはアルファベット順ですが、ここでは用途で並べています。

フォームと入力

Button · Input · InputGroup · Textarea · Label · Select · Checkbox · Switch · Slider · Toggle · ToggleGroup · Calendar · Command

レイアウトとナビゲーション

Card · Tabs · Separator · ScrollArea · Sidebar · Breadcrumb · Accordion · Collapsible

データ表示

Table · Badge · Progress

オーバーレイ

Dialog · Sheet · Popover · Tooltip · DropdownMenu

状態表示

Alert · Skeleton · Spinner · Loading · Empty · ErrorState

Loading / Empty / ErrorState の 3 つだけは shadcn/ui にはなく、Vantage が足したものです。

ユーティリティ

cn() · useIsMobile()

@squadbase/vantage/components

ui/ を組み上げた、ダッシュボード向けの複合部品です。

@squadbase/vantage/markdown

MarkdownRenderer だけが置かれた独立のサブパスです。 Markdown 描画は Shiki の全言語文法を抱えており、components のバレルに混ぜるとビルド出力が 10 MB 以上増えるため、意図的に分けてあります。

組み合わせる

import { Button } from "@squadbase/vantage/ui";
import {
  PageShell,
  PageShellHeader,
  PageShellHeading,
  PageShellTitle,
  PageShellDescription,
  PageShellHeaderEnd,
  PageShellActions,
  PageShellContent,
  DashboardCardPreset,
  MetricValue,
  TrendIndicator,
  EChart,
  type EChartsOption,
} from "@squadbase/vantage/components";

const option: EChartsOption = {
  xAxis: { type: "category", data: monthly.map((m) => m.month) },
  yAxis: { type: "value" },
  series: [{ type: "bar", data: monthly.map((m) => m.revenue) }],
};

export default function Overview() {
  return (
    <PageShell>
      <PageShellHeader>
        <PageShellHeading>
          <PageShellTitle>売上ダッシュボード</PageShellTitle>
          <PageShellDescription>直近 6 か月の推移</PageShellDescription>
        </PageShellHeading>
        <PageShellHeaderEnd>
          <PageShellActions>
            <Button variant="outline">エクスポート</Button>
          </PageShellActions>
        </PageShellHeaderEnd>
      </PageShellHeader>

      <PageShellContent>
        <div className="grid gap-4 md:grid-cols-3">
          <DashboardCardPreset title="売上">
            <MetricValue className="my-0">¥1,240,000</MetricValue>
            <TrendIndicator value={12.4} direction="up" />
          </DashboardCardPreset>
          <DashboardCardPreset title="新規顧客">
            <MetricValue className="my-0">128</MetricValue>
            <TrendIndicator value={3.1} direction="down" />
          </DashboardCardPreset>
          <DashboardCardPreset title="解約率">
            <MetricValue className="my-0">2.1%</MetricValue>
          </DashboardCardPreset>
        </div>

        <DashboardCardPreset title="月次売上" className="mt-4">
          <EChart option={option} height={320} />
        </DashboardCardPreset>
      </PageShellContent>
    </PageShell>
  );
}

テーマ

見た目は CSS 変数（デザイントークン）で決まります。色や角丸を変えたいときは、ページと同じ側に置いた styles.css（src/ があれば src/styles.css）で変数だけを上書きします — 詳しくは UI とテーマ を参照してください。

ソースを編集したいとき

コンポーネントの中身そのものを変えたい場合は、編集可能なコピーを取り出します。

vantage add ui data-table        # 編集可能な DataTable を components/ へ
vantage add block sales-overview

このページの読み方

各コンポーネントのページには、動くプレビューとそのソースがタブで並んでいます。 プレビューのソース先頭にある export const client = "only"; はドキュメントサイト側の指定で、 アプリのコードには要りません。