Card

A compound container component with Card.Header, Card.Body, and Card.Footer sub-components for structured content layouts.

Basic

Full Card

A card with header, body, and footer sections.

Profile Card

A user profile card with avatar, bio, and stats.

Stats Dashboard

Metric cards with values and change indicators.

Notification Feed

A card with a list of notification items.

Card Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the card container.
`children`	`ReactNode`	—	The card content. Typically Card.Header, Card.Body, and Card.Footer.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

className

string

Additional CSS classes for the card container.

children

ReactNode

The card content. Typically Card.Header, Card.Body, and Card.Footer.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

Card.Header Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the header section.
`children`	`ReactNode`	—	Header content.

className

string

Additional CSS classes for the header section.

children

ReactNode

Header content.

Card.Body Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the body section.
`children`	`ReactNode`	—	Body content.

className

string

Additional CSS classes for the body section.

children

ReactNode

Body content.

Card.Footer Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the footer section.
`children`	`ReactNode`	—	Footer content.

className

string

Additional CSS classes for the footer section.

children

ReactNode

Footer content.