BlankUI

display

Card

A bordered surface that groups related content, with header, content and footer parts.

npx blankui add card
Raw markdown for agentsRegistry JSON

Notifications

Choose what you want to hear about.

When to use

  • Group related content, like a settings section or a summary.
  • Items in a grid of projects, plans or stats.

Use something else when

  • You only need space between elements. Use layout.
  • Content should block the page until the user responds. Use dialog.
  • Showing rows of data with the same fields. Use table.

Import

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

Example

<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>Choose what you want to hear about.</CardDescription>
  </CardHeader>
  <CardContent>
    <Stack gap={3}>...</Stack>
  </CardContent>
  <CardFooter>
    <Button>Save</Button>
  </CardFooter>
</Card>

Card grid

<Grid columns={{ base: 1, md: 3 }} gap={6}>
  {plans.map((plan) => (
    <Card key={plan.id}>
      <CardHeader>
        <CardTitle>{plan.name}</CardTitle>
        <CardDescription>{plan.price}</CardDescription>
      </CardHeader>
    </Card>
  ))}
</Grid>

Notes

  • CardTitle renders an h3. Use asChild to pick another heading level: <CardTitle asChild><h2>Billing</h2></CardTitle>.
  • Every part already has padding and spacing. Do not add p-* classes.

Mistakes to avoid

AvoidInstead
<div className="rounded-lg border p-6 shadow"><Card>
A Card inside another CardUse a Stack inside one Card, or separate Cards in a Grid
<CardContent className="p-6"> (adding padding)<CardContent> already has padding

Install with the shadcn CLI: npx shadcn add https://blank.vageshwar.dev/r/card.json