Card

Welcome back. Enter your details.

Password

import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { TextField } from "@/components/ui/text-field";

export default function CardDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Sign in</CardTitle>
        <CardDescription>Welcome back. Enter your details.</CardDescription>
        <CardAction>
          <Button variant="link" size="sm">
            Sign up
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent className="grid gap-4">
        <TextField label="Email" type="email" placeholder="you@company.com" />
        <TextField label="Password" type="password" />
      </CardContent>
      <CardFooter className="flex-col">
        <Button className="w-full">Sign in</Button>
        <Button variant="outline" className="w-full">
          Continue with Google
        </Button>
      </CardFooter>
    </Card>
  );
}

Installation

$ pnpm dlx shadcn@latest add @desyne/card

The CLI installs dependencies and any other components this one uses.

Every card part is a styled <div> with no React Aria behavior and no "use client" directive, so cards render in server components. Put interactive children (buttons, fields, links) inside and they bring their own behavior.

When to use

Card: a self-contained group of content with its own heading, such as a stat, a settings section, a pricing tier or a preview.
Item: a single row inside a list (media, a title, a quiet second line and actions). Stack items inside a card rather than stacking cards.
Alert: a message that needs attention, not a container.
Dialog or Sheet: content that should interrupt or overlay the page.
Avoid wrapping a whole page in one card, and avoid nesting outline cards; use filled or CardInset for an inner surface.

Anatomy

tsx

<Card>                  {/* surface: variant, size (sets --card-px) */}
  <CardHeader>          {/* grid: title + description, action on the right */}
    <CardTitle />       {/* a leading svg becomes an icon */}
    <CardDescription />
    <CardAction />      {/* top-right slot: button, badge, menu */}
  </CardHeader>
  <CardContent>         {/* horizontally padded body */}
    <CardInset />       {/* optional muted inner surface */}
  </CardContent>
  <CardFooter />        {/* row of actions or meta text */}
</Card>

Part	Renders	Notes
`Card`	`<div>`	Root. Flex column with vertical padding and a gap between parts. Sets the `--card-px` variable used by the other parts.
`CardHeader`	`<div>`	Two-row grid. Switches to two columns when it contains a `CardAction`. `separator` draws an inset hairline underneath.
`CardTitle`	`<div>`	Medium-weight title. Any direct `svg` child is sized to 16px and spaced as a leading icon.
`CardDescription`	`<div>`	Muted supporting text.
`CardAction`	`<div>`	Pinned to the top-right of the header, spanning both rows.
`CardContent`	`<div>`	Adds the card's horizontal padding.
`CardInset`	`<div>`	A rounded, muted surface for previews, code, media or empty states. Add your own padding.
`CardFooter`	`<div>`	Horizontal flex row with the card's horizontal padding.

The parts render as <div> for layout flexibility. CardTitle is not a heading element; if the card title should appear in the document outline, put an <h2>/<h3> inside it.

Examples

Variants

outline is the default and suits most dashboard surfaces. elevated lifts featured content with a soft shadow, filled is a muted panel with no border for secondary or nested content, and ghost keeps the spacing and slots with no surface at all.

Outline

The default. A hairline border for most dashboard surfaces.

variant="outline"

Elevated

A soft shadow that lifts featured content off the page.

variant="elevated"

Filled

A muted fill with no border, for secondary or nested panels.

variant="filled"

Ghost

No surface at all. Keeps the spacing and slots only.

variant="ghost"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

const variants = [
  {
    variant: "outline",
    title: "Outline",
    text: "The default. A hairline border for most dashboard surfaces.",
  },
  {
    variant: "elevated",
    title: "Elevated",
    text: "A soft shadow that lifts featured content off the page.",
  },
  {
    variant: "filled",
    title: "Filled",
    text: "A muted fill with no border, for secondary or nested panels.",
  },
  {
    variant: "ghost",
    title: "Ghost",
    text: "No surface at all. Keeps the spacing and slots only.",
  },
] as const;

export default function CardVariants() {
  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      {variants.map((v) => (
        <Card key={v.variant} variant={v.variant} size="sm">
          <CardHeader>
            <CardTitle>{v.title}</CardTitle>
            <CardDescription>{v.text}</CardDescription>
          </CardHeader>
          <CardContent>
            <code className="text-muted-foreground text-xs">
              variant="{v.variant}"
            </code>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

Sizes

size controls the vertical padding, the gap between parts and the --card-px horizontal padding every part reads. sm (12px) suits dense grids, md (16px) is the default and lg (24px) suits forms and focused content.

Size sm

12px padding and gap. Dense grids and sidebars.

Size md

16px padding and gap. The default.

Size lg

24px padding and gap. Forms and focused pages.

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

const sizes = [
  { size: "sm", note: "12px padding and gap. Dense grids and sidebars." },
  { size: "md", note: "16px padding and gap. The default." },
  { size: "lg", note: "24px padding and gap. Forms and focused pages." },
] as const;

export default function CardSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      {sizes.map((s) => (
        <Card key={s.size} size={s.size}>
          <CardHeader>
            <CardTitle>Size {s.size}</CardTitle>
            <CardDescription>{s.note}</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-2 rounded-full bg-muted" />
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

Header, action and inset

Pass separator to CardHeader for an inset hairline aligned with the content. An svg inside CardTitle becomes a leading icon, CardAction holds one quiet action in the top-right corner, and CardInset is the muted surface for the headline figure.

Product health

Health score87

An icon title, an inset divider and one quiet action: the anatomy every widget card shares.

import { GaugeIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardHeader,
  CardInset,
  CardTitle,
} from "@/components/ui/card";

export default function CardWidget() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader separator>
        <CardTitle>
          <GaugeIcon /> Product health
        </CardTitle>
        <CardAction>
          <Button variant="outline" size="xs">
            Details
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <CardInset className="flex items-baseline justify-between p-3">
          <span className="text-muted-foreground text-xs">Health score</span>
          <span className="font-semibold text-2xl tabular-nums">87</span>
        </CardInset>
        <p className="text-muted-foreground text-xs leading-relaxed">
          An icon title, an inset divider and one quiet action: the anatomy
          every widget card shares.
        </p>
      </CardContent>
    </Card>
  );
}

Bordered header and footer

Add border-b to CardHeader or border-t to CardFooter for full-width dividers; the parts add matching padding on the bordered side automatically. Use this for settings sections where the footer holds the save action.

Workspace name

Shown in the sidebar, invitations and email notifications.

Max. 32 characters.

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { TextField } from "@/components/ui/text-field";

export default function CardFooterExample() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader className="border-b">
        <CardTitle>Workspace name</CardTitle>
        <CardDescription>
          Shown in the sidebar, invitations and email notifications.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <TextField
          aria-label="Workspace name"
          defaultValue="Northwind Analytics"
        />
      </CardContent>
      <CardFooter className="justify-between border-t">
        <p className="text-muted-foreground text-xs">Max. 32 characters.</p>
        <Button size="sm">Save</Button>
      </CardFooter>
    </Card>
  );
}

Media

For an edge-to-edge cover, remove the top padding with pt-0 and clip the corners with overflow-hidden. The cover can be an image, video or illustration.

Conference

Design Systems Summit 2026

Two days of talks on tokens, accessibility and component APIs.

Nov 12–13, 2026 Lisbon, Portugal

import { CalendarIcon, MapPinIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export default function CardMedia() {
  return (
    <Card className="w-full max-w-sm overflow-hidden pt-0">
      <div className="relative aspect-[2/1] bg-[radial-gradient(circle_at_20%_20%,var(--chart-2),transparent_55%),radial-gradient(circle_at_80%_30%,var(--chart-1),transparent_50%),linear-gradient(135deg,var(--chart-5),var(--chart-4))]">
        <Badge
          variant="solid"
          color="neutral"
          shape="pill"
          className="absolute top-3 left-3"
        >
          Conference
        </Badge>
      </div>
      <CardHeader>
        <CardTitle>Design Systems Summit 2026</CardTitle>
        <CardDescription>
          Two days of talks on tokens, accessibility and component APIs.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-1.5 text-muted-foreground text-xs">
        <span className="flex items-center gap-1.5">
          <CalendarIcon className="size-3.5" /> Nov 12–13, 2026
        </span>
        <span className="flex items-center gap-1.5">
          <MapPinIcon className="size-3.5" /> Lisbon, Portugal
        </span>
      </CardContent>
      <CardFooter>
        <Button size="sm" className="w-full">
          Get tickets
        </Button>
      </CardFooter>
    </Card>
  );
}

Stat cards

A description, a large tabular value in CardTitle and a trend Badge in CardAction make a compact KPI tile. Use size="sm" in grids.

Active users

12,480

+8.2%

vs. last 7 days

Open incidents

-3

vs. last 7 days

import {
  ShieldAlertIcon,
  TrendingDownIcon,
  TrendingUpIcon,
  UsersIcon,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardAction,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

const stats = [
  {
    label: "Active users",
    value: "12,480",
    delta: "+8.2%",
    up: true,
    icon: UsersIcon,
  },
  {
    label: "Open incidents",
    value: "7",
    delta: "-3",
    up: false,
    icon: ShieldAlertIcon,
  },
];

export default function CardStats() {
  return (
    <div className="grid w-full max-w-xl gap-4 sm:grid-cols-2">
      {stats.map((s) => (
        <Card key={s.label} size="sm">
          <CardHeader>
            <CardDescription className="flex items-center gap-1.5">
              <s.icon className="size-3.5" /> {s.label}
            </CardDescription>
            <CardTitle className="text-2xl tabular-nums">{s.value}</CardTitle>
            <CardAction>
              <Badge
                variant="soft"
                color={s.up ? "success" : "danger"}
                size="sm"
              >
                {s.up ? <TrendingUpIcon /> : <TrendingDownIcon />} {s.delta}
              </Badge>
            </CardAction>
          </CardHeader>
          <CardFooter className="text-muted-foreground text-xs">
            vs. last 7 days
          </CardFooter>
        </Card>
      ))}
    </div>
  );
}

Interactive cards

isInteractive only adds a pointer cursor and hover feedback; it does not make the card focusable or clickable. Put a real link inside and stretch it over the card with an after:absolute after:inset-0 overlay, so middle-click, "open in new tab" and keyboard focus keep working. has-[a:focus-visible] moves the focus ring to the card.

Documentation

Guides, concepts and the full API reference.

Examples

Copy-paste starting points for common screens.

import { ArrowUpRightIcon, BookOpenIcon, BoxesIcon } from "lucide-react";
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

const links = [
  {
    icon: BookOpenIcon,
    title: "Documentation",
    text: "Guides, concepts and the full API reference.",
    href: "#documentation",
  },
  {
    icon: BoxesIcon,
    title: "Examples",
    text: "Copy-paste starting points for common screens.",
    href: "#examples",
  },
];

export default function CardInteractive() {
  return (
    <div className="grid w-full max-w-xl gap-4 sm:grid-cols-2">
      {links.map((c) => (
        <Card
          key={c.title}
          size="sm"
          isInteractive
          className="relative has-[a:focus-visible]:ring-[3px] has-[a:focus-visible]:ring-ring/25"
        >
          <CardHeader>
            <span className="mb-2 flex size-8 items-center justify-center rounded-md bg-primary/10 text-primary">
              <c.icon className="size-4" />
            </span>
            <CardTitle>
              {/* The ::after overlay stretches the link over the whole card. */}
              <a
                href={c.href}
                className="flex items-center gap-1 outline-none after:absolute after:inset-0 after:rounded-xl"
              >
                {c.title}
                <ArrowUpRightIcon className="size-3.5 text-muted-foreground transition-transform group-hover/card:translate-x-0.5 group-hover/card:-translate-y-0.5" />
              </a>
            </CardTitle>
            <CardDescription>{c.text}</CardDescription>
          </CardHeader>
        </Card>
      ))}
    </div>
  );
}

Loading

Mirror the final layout with Skeleton blocks so nothing shifts when data arrives. Mark the card aria-busy while it loads.

import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

export default function CardLoading() {
  return (
    <Card className="w-full max-w-sm" aria-busy="true" aria-label="Loading">
      <CardHeader>
        <Skeleton className="h-5 w-32" />
        <Skeleton className="mt-1 h-3.5 w-48" />
      </CardHeader>
      <CardContent className="flex flex-col gap-2">
        <Skeleton className="h-24 w-full rounded-lg" />
        <Skeleton className="h-3.5 w-full" />
        <Skeleton className="h-3.5 w-4/5" />
      </CardContent>
      <CardFooter>
        <Skeleton className="h-8 w-24" />
      </CardFooter>
    </Card>
  );
}

Empty state

Use CardInset as a quiet frame for an empty state, with one clear action to fill it.

Webhooks

No endpoints yet

Send events to your own services when deployments finish or fail.

import { PlusIcon, WebhookIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardInset,
  CardTitle,
} from "@/components/ui/card";

export default function CardEmpty() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader separator>
        <CardTitle>
          <WebhookIcon /> Webhooks
        </CardTitle>
      </CardHeader>
      <CardContent>
        <CardInset className="flex flex-col items-center gap-3 px-6 py-8 text-center">
          <div className="flex flex-col gap-1">
            <p className="font-medium text-sm">No endpoints yet</p>
            <p className="text-muted-foreground text-xs">
              Send events to your own services when deployments finish or fail.
            </p>
          </div>
          <Button variant="outline" size="sm">
            <PlusIcon /> Add endpoint
          </Button>
        </CardInset>
      </CardContent>
    </Card>
  );
}

Recipes

Pricing tiers

Two tiers side by side. The featured plan uses elevated with a ring and a "Popular" badge in CardAction; size="lg" gives the content room.

Starter

For side projects and small teams.

$0/ user / month

3 projects
1,000 events / day
Community support

Team

For growing teams shipping every week.

Popular

$24/ user / month

Unlimited projects
250,000 events / day
Role-based access
Email support

import { CheckIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

const plans = [
  {
    name: "Starter",
    price: "$0",
    description: "For side projects and small teams.",
    features: ["3 projects", "1,000 events / day", "Community support"],
    cta: "Get started",
    featured: false,
  },
  {
    name: "Team",
    price: "$24",
    description: "For growing teams shipping every week.",
    features: [
      "Unlimited projects",
      "250,000 events / day",
      "Role-based access",
      "Email support",
    ],
    cta: "Start free trial",
    featured: true,
  },
];

export default function CardRecipePricing() {
  return (
    <div className="grid w-full max-w-2xl items-start gap-4 sm:grid-cols-2">
      {plans.map((plan) => (
        <Card
          key={plan.name}
          variant={plan.featured ? "elevated" : "outline"}
          size="lg"
          className={plan.featured ? "ring-2 ring-primary" : undefined}
        >
          <CardHeader>
            <CardTitle>{plan.name}</CardTitle>
            <CardDescription>{plan.description}</CardDescription>
            {plan.featured && (
              <CardAction>
                <Badge variant="solid" color="primary" shape="pill">
                  Popular
                </Badge>
              </CardAction>
            )}
          </CardHeader>
          <CardContent className="flex flex-col gap-5">
            <p className="flex items-baseline gap-1">
              <span className="font-semibold text-3xl tabular-nums">
                {plan.price}
              </span>
              <span className="text-muted-foreground text-sm">
                / user / month
              </span>
            </p>
            <ul className="flex flex-col gap-2 text-sm">
              {plan.features.map((f) => (
                <li key={f} className="flex items-center gap-2">
                  <CheckIcon className="size-4 text-success" aria-hidden />
                  {f}
                </li>
              ))}
            </ul>
          </CardContent>
          <CardFooter>
            <Button
              className="w-full"
              variant={plan.featured ? "solid" : "outline"}
            >
              {plan.cta}
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  );
}

Settings section

A notification settings panel: a header with an icon and hairline, a list of Switches with descriptions, and a bordered footer for the save action.

Email notifications

Choose what lands in your inbox.

DeploymentsWhen a production deploy succeeds or fails.

MentionsWhen someone mentions you in a comment.

Weekly digestA Monday summary of usage and spend.

import { BellIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";

const settings = [
  {
    id: "deploys",
    label: "Deployments",
    description: "When a production deploy succeeds or fails.",
    defaultSelected: true,
  },
  {
    id: "mentions",
    label: "Mentions",
    description: "When someone mentions you in a comment.",
    defaultSelected: true,
  },
  {
    id: "digest",
    label: "Weekly digest",
    description: "A Monday summary of usage and spend.",
    defaultSelected: false,
  },
];

export default function CardRecipeSettings() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader separator>
        <CardTitle>
          <BellIcon /> Email notifications
        </CardTitle>
        <CardDescription>Choose what lands in your inbox.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        {settings.map((s, i) => (
          <div key={s.id} className="flex flex-col gap-3">
            {i > 0 && <Separator />}
            <Switch
              labelPlacement="start"
              description={s.description}
              defaultSelected={s.defaultSelected}
            >
              {s.label}
            </Switch>
          </div>
        ))}
      </CardContent>
      <CardFooter className="justify-end border-t">
        <Button variant="ghost" size="sm">
          Reset
        </Button>
        <Button size="sm">Save preferences</Button>
      </CardFooter>
    </Card>
  );
}

Team members

A card that holds a list of Item rows with Avatars, role badges and a per-row menu button. px-2 on CardContent lets row hover backgrounds reach closer to the edge.

Team members

3 of 5 seats used on the Team plan.

Olivia Martin

olivia@northwind.io

Owner

Jackson Lee

jackson@northwind.io

Admin

Isabella Nguyen

isabella@northwind.io

Member

import { MoreHorizontalIcon, UserPlusIcon } from "lucide-react";
import { Avatar } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";

const members = [
  {
    name: "Olivia Martin",
    email: "olivia@northwind.io",
    role: "Owner",
    initials: "OM",
  },
  {
    name: "Jackson Lee",
    email: "jackson@northwind.io",
    role: "Admin",
    initials: "JL",
  },
  {
    name: "Isabella Nguyen",
    email: "isabella@northwind.io",
    role: "Member",
    initials: "IN",
  },
];

export default function CardRecipeTeam() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Team members</CardTitle>
        <CardDescription>3 of 5 seats used on the Team plan.</CardDescription>
        <CardAction>
          <Button variant="outline" size="xs">
            <UserPlusIcon /> Invite
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent className="px-2">
        <ItemGroup>
          {members.map((m) => (
            <Item key={m.email} size="sm">
              <ItemMedia>
                <Avatar colorful alt={m.name} fallback={m.initials} />
              </ItemMedia>
              <ItemContent>
                <ItemTitle>{m.name}</ItemTitle>
                <ItemDescription>{m.email}</ItemDescription>
              </ItemContent>
              <ItemActions>
                <Badge size="sm" variant="outline">
                  {m.role}
                </Badge>
                <Button
                  variant="ghost"
                  size="icon-xs"
                  aria-label={`Options for ${m.name}`}
                >
                  <MoreHorizontalIcon />
                </Button>
              </ItemActions>
            </Item>
          ))}
        </ItemGroup>
      </CardContent>
    </Card>
  );
}

Accessibility

Cards have no role. They're visual grouping only; screen readers read the content in order.
CardTitle renders a <div>. When the card's title is a real section heading, render a heading element inside it (for example <CardTitle><h3>…</h3></CardTitle>) so it shows up in the heading outline.
For a card that navigates, use a real link (see Interactive cards); don't put onClick on the card <div>. Keep other interactive elements outside the stretched link's overlay, or raise them with relative z-10.
isInteractive is purely visual. It doesn't add focus, a role or keyboard handling.
If a card is a meaningful landmark (for example a named region of a dashboard), add role="region" and aria-labelledby pointing at its title.

Styling

Data attributes

Attribute	On	Present when
`data-slot="card"`	`Card`	Always
`data-slot="card-header"`	`CardHeader`	Always
`data-separator`	`CardHeader`	`separator` is true
`data-slot="card-title"`	`CardTitle`	Always
`data-slot="card-description"`	`CardDescription`	Always
`data-slot="card-action"`	`CardAction`	Always. `CardHeader` switches to two columns when it contains one.
`data-slot="card-content"`	`CardContent`	Always
`data-slot="card-inset"`	`CardInset`	Always
`data-slot="card-footer"`	`CardFooter`	Always

Card also sets the group/card Tailwind group, so children can react to hover with group-hover/card:….

Padding variable

Every part reads its horizontal padding from --card-px, which size sets. Override it to change the padding everywhere at once:

tsx

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

`cardVariants`

The tailwind-variants function behind Card. Use it to give another element (a <section>, a link, a React Aria GridListItem) the card surface.

tsx

import { cardVariants } from "@/components/ui/card";

<section className={cardVariants({ variant: "elevated", size: "lg" })}>…</section>;

API Reference

Card

Prop

Type

Also accepts every prop of <div>.

CardHeader

Prop

Type

Also accepts every prop of <div>.

CardTitle / CardDescription / CardAction / CardContent / CardInset / CardFooter

No extra props. Each accepts every prop of <div>.

cardVariants

Prop

Type

Item: list rows to place inside a card.
Badge: status and trend labels for card actions.
Skeleton: loading placeholders that match a card's layout.
Separator: dividers between sections of a card.