A server-safe React card with a Liquid Glass surface, header, body, and footer.
Card is a native layout primitive: it has no interactive state and forwards
its remaining native props, including style, to the root div. It is
server-safe and does not support the render prop. Use ui to style the glass
layers or any internal section.
The card below is the real component, matching the code example.
When title, description, or footer are omitted, the corresponding region is not rendered:
Card is a non-interactive container with no role or state of its own. Use a real heading for title, or add your own heading inside the body, so the card appears in the document outline.
When the whole card should be clickable, put one link or button in the title instead of adding a click handler to the root. See the accessibility guide for label guidance.
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Card heading, rendered as a div. |
description | ReactNode | — | Supporting text below the heading. |
footer | ReactNode | — | Footer action area. |
children | ReactNode | — | Card body content. |
ref | Ref<HTMLDivElement> | — | Ref forwarded to the root element. |
className | string | — | Merged into root; use it for layout. |
style | CSSProperties | — | Inline styles merged into the same element as className. |
ui | { root?: ClassValue; glass?: ClassValue; overlay?: ClassValue; layout?: ClassValue; header?: ClassValue; title?: ClassValue; description?: ClassValue; body?: ClassValue; footer?: ClassValue } | — | Tailwind classes for internal slots, keyed by data-slot. |
| Attribute | Description |
|---|---|
data-slot | Marks internal parts (root, glass, overlay, layout, header, title, description, body, footer) for styling. |
The component uses the shared glass material. Tune shared --ui-glass-* tokens on a parent, use className for layout, and use ui for internal slots keyed by data-slot. Component-specific values live in src/theme/card.ts. See the theming guide for token layers and presets.