Card

The generic card. For dashboard tiles use DashboardCard.

The generic card. For dashboard tiles, DashboardCard — which already has the spacing and a skeleton — fits better.

export const client = "only";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
  CardFooter,
  Button,
} from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>今月の売上</CardTitle>
        <CardDescription>2026 年 7 月 1 日 〜 7 月 23 日</CardDescription>
        <CardAction>
          <Button variant="ghost" size="sm">
            詳細
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p className="text-3xl font-medium tracking-tight">¥1,240,000</p>
      </CardContent>
      <CardFooter className="border-t pt-4 text-muted-foreground">
        前月比 +12.4%
      </CardFooter>
    </Card>
  );
}

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
  CardFooter,
} from "@squadbase/vantage/ui";

Parts

Part	Role
`Card`	The frame. `size`: `default` \| `sm` (changes inner spacing)
`CardHeader`	The heading row
`CardTitle` / `CardDescription`	Heading and supporting text
`CardAction`	The right end of the heading row; adding it makes the header two columns
`CardContent`	The body
`CardFooter`	The bottom; adding it tightens the card’s bottom padding

Spacing comes from a single --card-spacing CSS variable, so you can override it per card.

<Card className="[--card-spacing:--spacing(6)]">…</Card>