DashboardCard

The dashboard tile, with a preset and a matching skeleton.

The tile you line up on a dashboard. Tighter than the plain Card, with a skeleton of the same shape for loading. The common arrangement is one component: DashboardCardPreset.

export const client = "only";

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

export default function Example() {
  return (
    <div className="grid w-[40rem] grid-cols-3 gap-4">
      <DashboardCardPreset
        title="売上"
        description="今月"
        actions={<Button variant="ghost" size="xs">詳細</Button>}
        footer="前月比"
      >
        <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>

      <DashboardCardSkeleton />
    </div>
  );
}

import {
  DashboardCard,
  DashboardCardHeader,
  DashboardCardTitle,
  DashboardCardDescription,
  DashboardCardAction,
  DashboardCardContent,
  DashboardCardFooter,
  DashboardCardSkeleton,
  DashboardCardPreset,
} from "@squadbase/vantage/components";

DashboardCardPreset

With no title, description or actions the header is dropped entirely — same for footer.

Composing it yourself

When you want a different arrangement, use the parts directly.

<DashboardCard>
  <DashboardCardHeader>
    <div>
      <DashboardCardTitle>Revenue</DashboardCardTitle>
      <DashboardCardDescription>This month</DashboardCardDescription>
    </div>
    <DashboardCardAction>
      <Button variant="ghost" size="xs">Details</Button>
    </DashboardCardAction>
  </DashboardCardHeader>
  <DashboardCardContent>…</DashboardCardContent>
  <DashboardCardFooter>+12.4% vs last month</DashboardCardFooter>
</DashboardCard>

While loading

DashboardCardSkeleton draws a box of the same size, so the page doesn’t jump when the data lands.

{isLoading ? <DashboardCardSkeleton /> : <DashboardCardPreset title="Revenue">…</DashboardCardPreset>}