Expandable Data Card

Use Expandable Data Card to keep a key metric visible while revealing its breakdown in the same surface. The card grows inline, so the detail stays connected to the summary without an overlay.

Preview

Reduce motion:Off

Tune:Off

Inspect

Total revenue

$39,820

Sep 1 to Sep 30

+12.8%

Installation

npx shadcn@latest add @sona-ui/expandable-data-card

Basic usage

revenue-card.tsx

import ExpandableDataCard from "@/components/ui/expandable-data-card/expandable-data-card";
 
export function RevenueCard() {
return (
  <ExpandableDataCard title="Revenue" summary={<strong>$39,820</strong>}>
    <p>Subscriptions account for 62% of revenue.</p>
  </ExpandableDataCard>
);
}

Usage


const sources = [
  { name: "Subscriptions", amount: "$24,840", share: "62%" },
  { name: "One-time", amount: "$10,320", share: "26%" },
  { name: "Services", amount: "$4,660", share: "12%" },
];
 
export function RevenueDataCard({
  title = "Total revenue",
}: {
  title?: string;
}) {
  return (
    <ExpandableDataCard
      title={title}
      summary={
        <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-2">
          <div>
            <p className="text-3xl font-semibold tracking-tight tabular-nums">
              $39,820
            </p>
            <p className="mt-1 text-xs text-muted-foreground">Sep 1 to Sep 30</p>
          </div>
          <span className="inline-flex items-center gap-0.5 rounded-full bg-secondary px-2.5 py-1 text-xs font-medium text-foreground">
            <ArrowUpRight aria-hidden="true" className="size-3.5" />
            +12.8%
          </span>
        </div>
      }
    >
      <div className="mb-3 flex items-center justify-between text-xs text-muted-foreground">
        <span>Revenue by source</span>
        <span>Sep 1 to Sep 30</span>
      </div>
      <div className="space-y-3">
        {sources.map((source) => (
          <div key={source.name} className="flex items-center gap-3 text-sm">
            <span className="min-w-0 flex-1 truncate text-muted-foreground">
              {source.name}
            </span>
            <span className="font-medium tabular-nums">{source.amount}</span>
            <span className="w-8 text-right text-xs tabular-nums text-muted-foreground">
              {source.share}
            </span>
          </div>
        ))}
      </div>
    </ExpandableDataCard>
  );
}
 
export default function ExpandableDataCardDemo() {
  return (
    <div className="flex min-h-80 w-full items-start justify-center px-5 py-14">
      <RevenueDataCard />
    </div>
  );
}

API

Property	Type	Default	Description
`title`	`string`	`required`	Short label describing the data shown in the card.
`summary`	`ReactNode`	`required`	Always-visible summary content, such as a metric and its change.
`children`	`ReactNode`	`required`	Additional data revealed when the card expands.
`open`	`boolean`	`undefined`	Controlled expanded state.
`defaultOpen`	`boolean`	`false`	Initial expanded state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	`undefined`	Called when the user opens or closes the card.
`className`	`string`	`undefined`	Additional classes for the card surface.

Accessibility

The Details button exposes its expanded state and maintains a stable connection to the detail container. The card title labels the revealed region. Exiting content becomes inert immediately, and focus returns to the Details button if a controlled close would remove the focused element. Reduced-motion users receive the same content without the morphing transition.

Detail content unmounts after closing. Keep any form values or other state that must survive reopening in the parent component.

Styling

CLI installation registers the shadow utilities automatically. For manual installation, install shadow-plugin and add @plugin "shadow-plugin"; to your Tailwind v4 stylesheet.

The component owns the expandable surface and interaction. Supply your own metric summary and detail content, and use className to adapt the card width or surface color.

Was this page helpful?

Your response helps us improve component docs.