All components
Surfaces
Card
Grouped content container with lit elevated, outlined, muted, and density states.
Surfaces
Display
Documented
import { Card } from '@ivim/native/components';
Playground
Adjust the controls to preview live prop combinations. The code snippet updates to match the current selection.
Card title
Cards group related interface regions with consistent surface and elevation tokens.
variant
variant
elevated
outlined
filled
plain
muted
density
density
compact
comfortable
spacious
<Card />
Example
State Matrix
Default
Nested Card
Elevated (glass)
Weight
Raised glass — translucent fill, hairline border, glow.
157.3 lb
Filled (base)
Base surface
Opaque tonal fill, no border — for grouped content.
With content
Card title
Cards group related interface regions.
Outlined
Outlined card
Lower emphasis but still separated.
Muted
Muted card
Useful inside stronger parent surfaces.
Compact
Compact card
Dense metadata layout.
Spacious
Spacious card
Roomier page-section layout.
Props
Public props for this component. Required props are marked; defaults reflect the component implementation.
variant
'elevated' | 'outlined' | 'filled' | 'plain'
default: 'elevated'
Surface treatment mapping to background, border, and elevation tokens.
density
'compact' | 'comfortable' | 'spacious'
default: 'comfortable'
Internal padding scale.
...BoxProps
BoxProps
All layout props (gap, padding, flex, etc.) are forwarded to the underlying Box.
State coverage
Interaction and visual states this component supports.
base
semantic color
density
Token references
Semantic design tokens this component page exercises. Tap one to edit it live.