Installation
pnpm dlx shadcn@latest add @toui/card
Examples
Accent
Pattern
Tokens
7 CSS variables in 4 categories.
px
| CSS Variable | Value | Description |
|---|
--card-px-sm | 0.75rem | 12px |
--card-px-default | 1rem | 16px |
py
| CSS Variable | Value | Description |
|---|
--card-py-sm | 0.75rem | — |
--card-py-default | 1rem | — |
gap
| CSS Variable | Value | Description |
|---|
--card-gap-sm | 0.75rem | — |
--card-gap-default | 1rem | — |
radius
| CSS Variable | Value | Description |
|---|
--card-radius | var(--radius-xl) | Card corner radius |
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 | enum | "default" |
className | string | |
A component for the header section of the card. Inherits variant from Card context.
| Prop | Type | Default |
|---|
className | string | |
CardHeading
A container for the card's heading content with consistent spacing.
| Prop | Type | Default |
|---|
className | string | |
A container for action items in the card header with flexbox layout.
| Prop | Type | Default |
|---|
className | string | |
CardTitle
A heading component for the card's title with default typography styles.
| Prop | Type | Default |
|---|
className | string | |
CardDescription
A component for descriptive text with muted styling.
| Prop | Type | Default |
|---|
className | string | |
CardContent
The main content area of the card. Inherits variant from Card context.
| Prop | Type | Default |
|---|
className | string | |
CardTable
A grid container for table layouts within the card. Inherits variant from Card context.
| Prop | Type | Default |
|---|
className | string | |
The footer section of the card. Inherits variant from Card context.
| Prop | Type | Default |
|---|
className | string | |