Card
A bounded surface that groups related content
Pro plan
Everything in Starter, plus seats and invoicing.
Seats12 of 20
Storage184 GB
InvoicesEnabled
Pro plan
Everything in Starter, plus seats and invoicing.
Seats12 of 20
Storage184 GB
InvoicesEnabled
Pro plan
Everything in Starter, plus seats and invoicing.
Seats12 of 20
Storage184 GB
InvoicesEnabled
Notifications
Choose what this workspace emails you about.
Build failuresImmediately
Weekly digestMondays
Installation
npx shadcn@latest add @sudokw/components-cardimport { Card } from "@gpuixui/components";Usage
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@gpuixui/components/card";
<Card>
<CardHeader>
<CardTitle>Pro plan</CardTitle>
<CardDescription>
Everything in Starter, plus seats and invoicing.
</CardDescription>
</CardHeader>
<CardContent>{rows}</CardContent>
<CardFooter>{actions}</CardFooter>
</Card>;Composition
Card
├── CardHeader
│ ├── CardTitle
│ └── CardDescription
├── CardContent
└── CardFooterAPI reference
| Prop | Type | Default | Consequence |
|---|---|---|---|
variant | "outline" | "elevated" | "plain" | "outline" — a stored name the union does not carry | the edge and lift in Treatments below |
className | string | none | a recipe class string joined after the component's own, so it wins a conflict |
style | StyleDesc | none | merged last, after the compiled recipe |
children | PartChildren | none | the parts; text and numbers are rejected for every part that hosts parts |
Treatments
| Treatment | Edge | Lift |
|---|---|---|
outline | 1px border | none |
elevated | none | elevation.sm |
plain | none | none |
All three paint the card fill and a fixed 8px corner; outline edges in
border-input, compiled to border.
Edit this page on GitHubapps/docs/content/docs/components/card.mdx