Components
Card
Surface container for grouped content and actions.
The Card primitive is a composable surface — a bordered, padded container with
slots for a header (title, description, an optional action), content, and a
footer. Every part is a styled <div>, so it carries no custom props beyond the
native element's; compose the pieces you need.
Preview
Project usage
Your plan renews on the 1st.
8,240 of 10,000 API calls used this month.
import { Button } from '@web/components/ui/button';import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from '@web/components/ui/card';export default function CardDemo() { return ( <Card className="w-full max-w-sm"> <CardHeader> <CardTitle>Project usage</CardTitle> <CardDescription>Your plan renews on the 1st.</CardDescription> <CardAction> <Button variant="outline" size="sm"> Manage </Button> </CardAction> </CardHeader> <CardContent className="text-sm text-muted-foreground"> 8,240 of 10,000 API calls used this month. </CardContent> <CardFooter className="border-t"> <Button className="w-full">Upgrade plan</Button> </CardFooter> </Card> );}Import
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";Props
Each part (Card, CardHeader, CardTitle, CardDescription, CardAction,
CardContent, CardFooter) accepts all native <div> attributes plus
className — there are no custom props. Layout is driven by the slots you
render: a CardAction in the header positions itself top-right, and adding
border-t / border-b adjusts the footer / header padding.