Card

Free · MIT

Eight surfaces (elevated, glass, gradient border, neo, inset…) with shadow, padding, radius and accent stripes, plus hover layers (lift, 3D tilt, pointer spotlight, glow, scale) and a looping border beam.

Markdown Open in v0

Open in v0

Installation

$ npx shadcn@latest add https://goodui.dev/r/card.json

The file lands in components/goodui/card.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/card works too.

Usage

import { CalendarPlus } from "lucide-react"
import { Card, CardFooter } from "@/components/goodui/card"
import { Badge } from "@/components/goodui/badge"
import { Button } from "@/components/goodui/button"

export function NextBooking() {
  return (
    <Card
      className="max-w-sm"
      accent="left"
      tone="success"
      icon={<CalendarPlus />}
      title="Balayage with Maya"
      description="Tomorrow, 09:30 · Chair 2"
      action={<Badge tone="success">Paid</Badge>}
      footer={
        <>
          <Button size="sm">Check in</Button>
          <Button size="sm" variant="ghost" tone="neutral">
            Reschedule
          </Button>
        </>
      }
    >
      2 hours · $180 deposit received. Client asked for a patch test.
    </Card>
  )
}

When to use

Use it for

Grouping one thing on a dashboard or settings page: a plan, a booking, a client, a report.
Pricing and feature grids where one card should stand out (accent, gradient-border, shadow="glow").
Clickable tiles that need hover feedback (lift, tilt, spotlight) without another library.
Empty states and drop zones: variant="dashed".

Reach for something else

A single KPI with a delta and sparkline: use stat-card, which is built on the same look.
Content that opens into a bigger view: use expandable-card or morphing-dialog.
Splitting sections of one long form: a separator keeps the page lighter than a stack of cards.

If you need	Use
Default dashboard surface	variant="elevated" (default) or "outline" for flat UIs
Grouped settings inside a page that is already a card	variant="inset" or "soft"
The recommended pricing plan	variant="gradient-border" or accent="top" with shadow="glow"
Status or category color on a list of cards	accent="left" with a tone
Clickable tiles in a grid	animation="lift" (calm) or "spotlight" (pointer-following border light)
Hero or showcase card on a marketing page	animation="tilt" or "border-beam"
Over photos or gradients	variant="glass"
Empty state or upload area	variant="dashed"

Examples

Featured pricing plan

<Card variant="gradient-border" shadow="glow" animation="lift" title="Studio" description="For teams up to 10 stylists">
  <p className="text-3xl font-semibold">$29<span className="text-sm text-muted-foreground">/month</span></p>
  <CardFooter separated>
    <Button className="w-full">Start free trial</Button>
  </CardFooter>
</Card>

Media card with parts

<Card padding="sm" animation="spotlight" tone="info">
  <CardMedia>
    <img src="/reports/october.png" alt="Revenue chart for October" />
  </CardMedia>
  <CardHeader>
    <CardTitle>October revenue</CardTitle>
    <CardDescription>Up 12% on September</CardDescription>
  </CardHeader>
</Card>