Card
A box of related things set into the page: a black header bar for the title and an action, the content, and a footer divided by a quiet line.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/cardExamples
A job with its reward
Sealed crate
Rail yards → North gate
Rush
Escort the crate through the yards before the night shift. Do not open it.
3,100 cr
import { Badge } from "@/components/zero/badge";import { Button } from "@/components/zero/button";import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/zero/card";import { ArrowRightIcon } from "@/components/zero/icons";export default function CardJob() { return ( <Card className="w-full max-w-sm"> <CardHeader> <CardTitle>Sealed crate</CardTitle> <CardDescription>Rail yards → North gate</CardDescription> <CardAction> <Badge>Rush</Badge> </CardAction> </CardHeader> <CardContent> <p className="text-zero-text-2"> Escort the crate through the yards before the night shift. Do not open it. </p> </CardContent> <CardFooter> <span className="font-semibold tabular-nums">3,100 cr</span> <Button size="sm" className="ms-auto"> Take it <ArrowRightIcon /> </Button> </CardFooter> </Card> );}Behaviour
It is square-cornered, like everything whose height depends on what it holds. A picture as its first child runs edge to edge. A card with no header is a plain box.
Pass interactive to a card that is a link or opens something: pointing at it lifts its outline to the accent, and a focused control inside lifts it to the focus yellow.
Props
Card
| Prop | Type | Default | Description |
|---|---|---|---|
| interactive | boolean | false | Lights the outline on hover and when something inside has keyboard focus. |