Card

Displays a card with header, content, and footer. The default variant uses a frosted glass effect. Use variant="solid" for a flat card with a solid background.

Create project

Deploy your new project in one-click.

Solid Variant

Use variant="solid" for a flat card with a solid background and border.

Solid Card

A flat card with a solid background.


<Card variant="solid">
  <CardHeader>
    <CardTitle>Solid Card</CardTitle>
    <CardDescription>A flat card with a solid background.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Selectable

Cards can be made selectable with selectable="standard" or selectable="ai". Selectable cards render as a <button> with aria-pressed for accessibility. They show a glow effect on hover and when selected. The ai glow uses the AI gradient; see the AI Toolkit for guidance and richer AI card compositions.


<Card selectable="standard" selected={selected} onClick={() => setSelected(!selected)}>
  <CardTitle>Standard</CardTitle>
  <CardDescription>Click to select this card.</CardDescription>
</Card>
 
<Card selectable="ai" selected={selected} onClick={() => setSelected(!selected)}>
  <CardTitle>AI Mode</CardTitle>
  <CardDescription>Uses an AI gradient glow when selected.</CardDescription>
</Card>

AI glow

A glow, an AI gradient shadow, can sit behind a card or a group of cards to mark it as AI without a border or a solid fill. It is a composition rather than a Card prop: render the AiGlow primitive as the first child of a relative parent, then layer the content above it in its own relative wrapper. The glow is decorative, so it is aria-hidden and ignores pointer events. For when to reach for a glow, see the AI Toolkit.

Give the card the translucent AI glass surface (variant="glass" with bg-[var(--ai-glass)]) so the colored glow reads through it instead of sitting behind an opaque fill.

Behind a single card

The card variant is a soft blurred blob. Pair it with a label so the emphasis is explained, and limit it to one best match per view.

Recommended plan

The glow marks this as the AI pick without a border or a solid color block.


<div className="relative">
  <AiGlow />
  <div className="relative">
    <Card variant="glass" className="bg-[var(--ai-glass)] dark:bg-[var(--ai-glass)]">
      {/* ... */}
    </Card>
  </div>
</div>

Behind a card group

The group variant is a wider, amorphous wash. Set the AI context once at the group level instead of marking every card, so the mark keeps its meaning.

Consolidate duplicate vendors

Merge three records into one to clean up reporting.

Renegotiate the storage tier

Usage has been under 40% for two quarters.


<div className="relative">
  <AiGlow variant="group" />
  <div className="relative grid gap-4 sm:grid-cols-2">
    <Card variant="glass" className="bg-[var(--ai-glass)] dark:bg-[var(--ai-glass)]">
      {/* ... */}
    </Card>
    {/* ...more cards */}
  </div>
</div>

Installation


npx shadcn@latest add @uipath/card

Usage


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


<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

GLASS_CLASSES

The GLASS_CLASSES constant is exported for reuse in other components that need the same frosted glass styling:


import { GLASS_CLASSES } from "@/components/ui/card"
 
<div className={cn(GLASS_CLASSES, "p-4")}>
  Glass morphism container
</div>