Layout & Display

Card

Bordered, rounded, elevated surface container, with header, body, and footer regions.

Example

Team plan

Unlimited projects and priority support for your whole team.

Analytics

Pressable tile — the whole card is one control.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Card content — usually CardHeader / CardBody / CardFooter.
`CardHeader / CardBody / CardFooter`	`div props`	—	Padded regions inside a Card. CardBody grows to fill height; adjacent sections auto-collapse their doubled vertical padding.

children

ReactNode

Default: —

Card content — usually CardHeader / CardBody / CardFooter.

CardHeader / CardBody / CardFooter

div props

Default: —

Padded regions inside a Card. CardBody grows to fill height; adjacent sections auto-collapse their doubled vertical padding.

Prop	Type	Default	Description
`shadow`	`"none" \| "xs" \| "xs-sm" \| "sm" \| "md" \| "lg"`	xs	Elevation.
`radius`	`"none" \| "xs" \| "xs-sm" \| "sm" \| "md" \| "lg" \| "full"`	lg	Corner radius.
`isBlurred`	`boolean`	false	Translucent background + backdrop blur where supported.

shadow

"none" | "xs" | "xs-sm" | "sm" | "md" | "lg"

Default: xs

Elevation.

radius

"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"

Default: lg

Corner radius.

isBlurred

boolean

Default: false

Translucent background + backdrop blur where supported.

Prop	Type	Default	Description
`isHoverable`	`boolean`	false	Lift on hover without becoming a control.
`isPressable`	`boolean`	false	Whole card is one activatable control; fires onPress on click / Enter / Space.
`isDisabled`	`boolean`	false	Dim the card and block onPress.
`as`	`ElementType`	div	Render as a different element/component (e.g. a router Link).
`onPress`	`(e) => void`	—	Called when isPressable and the card is activated.

isHoverable

boolean

Default: false

Lift on hover without becoming a control.

isPressable

boolean

Default: false

Whole card is one activatable control; fires onPress on click / Enter / Space.

isDisabled

boolean

Default: false

Dim the card and block onPress.

ElementType

Default: div

Render as a different element/component (e.g. a router Link).

onPress

(e) => void

Default: —

Called when isPressable and the card is activated.

Prop	Type	Default	Description
`fullWidth`	`boolean`	false	width: 100%.

fullWidth

boolean

Default: false

width: 100%.

Prop	Type	Default	Description
`classNames`	`{ base?: string }`	—	Slot class overrides.

classNames

{ base?: string }

Default: —

Slot class overrides.