Layout UI

Card

Surface container family: header, title, description, action, content, footer.

Preview

Welcome back
Sign in to continue to your Layout workspace.

You have 3 projects and 12 saved components ready to use.

Installation

bash
npx shadcn@latest add @layout/card

Usage

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

Examples

Card with action slot

API usage
Monthly extraction quota
Active
847/ 1,000

153 extractions remaining this month.

Settings form inside a card

Notification preferences
Choose how and when you receive updates.

Guidelines for AI agents

Group related content on a raised surface. CardAction slots into the header's top-right. Compose forms inside CardContent with CardFooter for actions.

Never

  • Nevernest cards inside cards; use Separator to divide content
  • Neveradd custom box-shadows; elevation comes from the shadow tokens

Tokens consumed

--layout-surface--layout-surface-fg--layout-border--layout-radius--layout-shadow-sm