Card React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import Card from @/components/ui/card.

import { Heart } from "lucide-react"
import { Avatar } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardFooter, CardLink, CardMedia } from "@/components/ui/card"

export function ListingCard({ onSave }: { onSave: () => void }) {
  return (
    <Card
      className="max-w-sm"
      media={
        <CardMedia src="/demo/apartment.jpg">
          <Badge variant="solid" size="sm" className="absolute start-3 top-3">New</Badge>
          <Button size="icon-sm" variant="soft" radius="full" aria-label="Save" onClick={onSave} className="absolute end-3 top-3">
            <Heart />
          </Button>
        </CardMedia>
      }
      title={<CardLink href="/listings/10482">2-bedroom apartment, Park Slope</CardLink>}
      description="Brooklyn · 580 sq ft · floor 3 of 4"
      footer={
        <CardFooter align="between">
          <span className="text-[17px] font-semibold">$445,000</span>
          <span className="flex items-center gap-2 text-[13px] text-muted-foreground">
            <Avatar src="/demo/ana-pop.jpg" name="Anna Price" size="xs" /> today, 2:20 PM
          </span>
        </CardFooter>
      }
    />
  )
}

Props

• titledefault ""
  ReactNode

  Simple API: the heading (an h3). Pass a CardLink here to make the whole card a link (interactive turns on by itself). The demo shows its sample listing title while empty.

• descriptiondefault ""
  ReactNode

  Simple API: the muted line under the title. The demo shows its sample while empty.

• variantdefault "elevated"
  "elevated" | "outline" | "soft" | "ghost"

  elevated is a raised white panel (the surface token with its shadow), outline a hairline frame, soft the flat gray tile (tinted by a tone), ghost only padding, for lists of cards on a panel. Deviation: elevated is a card-only value.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Tints soft and outline cards (the title takes the tone color) and colors the selected ring. Elevated and ghost cards only show it when selected.

• colordefault ""
  string

  Any CSS color. Replaces the tone: a 14% tint on soft cards, the border on outline cards, the selected ring.

• sizedefault "md"
  "sm" | "md" | "lg"

  Padding 16 / 20 / 24px (md and lg use one step less on phones), 12 / 16 / 20px between parts, and the title size. Media bleeds and divided footers follow.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner radius: 0, 12, 16 or 24px; full falls back to 24px. Inset media takes the radius minus the padding.

• interactivedefault false
  boolean

  Hover lift (2px and a floating shadow, a tint on ghost cards), a 0.98 press, pointer cursor and the focus ring; media zooms on hover. On by default with onClick, with a CardLink as the title prop, and with asChild onto a link, button or label. With the parts, set it next to a CardLink so the card really goes somewhere.

• selecteddefault false
  boolean

  A ring in the tone around selectable cards (plans, addresses, payment methods). With onClick the card also reports aria-pressed.

• disableddefault false
  boolean

  Dims the card and blocks the pointer, the lift and the press. Link and button cards, and a CardLink inside, get aria-disabled, leave the tab order and ignore clicks; disable other controls inside it yourself.

• orientationdefault "vertical"
  "vertical" | "horizontal"

  horizontal puts the media at the start from 640px up, bleeding to the top, bottom and start edges; phones keep it on top. With parts, wrap the rest in CardContent.

• divideddefault false
  boolean

  A hairline above the footer, edge to edge (stopping at start media). The default for every CardFooter inside, which can still override it.

• asChilddefault false
  boolean

  Renders your single child (an <a>, a router Link, a <label> around a radio) as the card, with its look and press. A link card cannot hold buttons; use a CardLink title for that. The demo swaps in a link and drops the like button.

• children
  ReactNode

  With the simple props, the body (inside CardBody). Without them, the parts: CardMedia, CardHeader, CardBody, CardFooter.

• action
  ReactNode

  Simple API: a control at the end of the header (a menu, a like, a badge). It stays clickable above a CardLink.

• media
  ReactNode

  Simple API: an image URL, a <CardMedia> (for aspect, overlays, inset), or any node (a chart, a map), which fills the media slot at its own height.

• footer
  ReactNode

  Simple API: footer content (end-aligned), or a <CardFooter> for its own align and divided.

• onClick
  (event: MouseEvent<HTMLDivElement>) => void

  Makes the card a button: role=button, a Tab stop, Enter and Space, interactive on. Not called while disabled. Prefer asChild with a real <a> for navigation.

• classNames
  Partial<Record<"media" | "content" | "header" | "title" | "description" | "action" | "body" | "footer", string>>

  Extra classes for the parts the simple API renders.

• className
  string

  Extra classes for the card itself, merged last. Override the spacing vars here, e.g. [--card-padding:12px].

Parts

FAQ

Used in

More React layout components