Card

A flexible container that groups related content. Compose using CardHeader, CardBody, and CardFooter sub-components. Supports shadows, radius variants, pressable state, and blurred backgrounds.

Default

A simple card with a header, body, and footer.

Card title

Supporting description goes here

Card body content. Use this area to display the main information of the card.

With image

Place an image above the card content by rendering it before CardHeader.

Mountain retreat

Available

Swiss Alps · 4 nights

A peaceful getaway surrounded by alpine meadows, fresh air, and stunning views.

$320 / night

With avatar and badge

Profile-style card combining an avatar, name, role badge, and actions.

Sofia Davis

Pro

Product Designer

Designing user-centered interfaces with a focus on clarity and accessibility.

Pressable

Set isPressable to make the entire card an interactive clickable surface.

Design system

Click to open

Component library

Click to open

Prototype kit

Click to open

Shadow

Four shadow depths: none, sm, md (default), and lg.

shadow="none"

shadow="sm"

shadow="md"

shadow="lg"

Radius

Five radius options from sharp corners to a pill shape.

radius="none"

radius="sm"

radius="md"

radius="lg"

radius="full"

Blurred

isBlurred applies a backdrop blur and semi-transparent background, ideal for overlaying content on images or gradients.

Blurred card

Semi-transparent with backdrop blur