Skip to Content
Shadcn ComponentsCard

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.

<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>

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>
CalendarCarousel