Card (Radix UI)
Containers for displaying content and actions about a single subject.
Installation
pnpm dlx shadcn@latest add @toui/card
Examples
Accent
API Reference
This component provides a customizable card system with various sections and styles.
Card
The main container component that provides context and styling for all card elements.
| Prop | Type | Default |
|---|---|---|
variant | ||
className |
CardHeader
A component for the header section of the card. Inherits variant from Card context.
| Prop | Type | Default |
|---|---|---|
className |
CardHeading
A container for the card's heading content with consistent spacing.
| Prop | Type | Default |
|---|---|---|
className |
CardToolbar
A container for action items in the card header with flexbox layout.
| Prop | Type | Default |
|---|---|---|
className |
CardTitle
A heading component for the card's title with default typography styles.
| Prop | Type | Default |
|---|---|---|
className |
CardDescription
A component for descriptive text with muted styling.
| Prop | Type | Default |
|---|---|---|
className |
CardContent
The main content area of the card. Inherits variant from Card context.
| Prop | Type | Default |
|---|---|---|
className |
CardTable
A grid container for table layouts within the card. Inherits variant from Card context.
| Prop | Type | Default |
|---|---|---|
className |
CardFooter
The footer section of the card. Inherits variant from Card context.
| Prop | Type | Default |
|---|---|---|
className |