Component
Card
A container that groups related content and lifts it off the page with a shadow. Four elevation steps from flat to lifted, the base every higher-level pattern sits on top of.
Standalone
A surface that lifts content off the page.
card.tsx
<NativeCard elevation={1} padding="md">
<p>A surface that lifts content off the page.</p>
</NativeCard>Example
A summary card lifted off the page, ending in one button so the surface and its single action read as a unit.
Total
$248.50
card-example.tsx
<NativeCard elevation={2} padding="lg">
<p className="text-sm text-muted-foreground">Total</p>
<p className="mt-1 text-2xl font-semibold">$248.50</p>
<div className="mt-4">
<NativeButton label="Confirm" variant="primary" size="md" />
</div>
</NativeCard>Capabilities
| Prop | Type | Description |
|---|---|---|
| childrenrequired | React.ReactNode | - |
| padding | "none" | "sm" | "md" | "lg" | - |
| elevation | 0 | 1 | 2 | 3 | - |
| className | string | - |
| onPress | () => void | - |