Component
Card
A container that groups related content and lifts it off the page with a shadow. Four elevation steps, approximating UIKit's default shadow depths, the base every higher-level pattern sits on top of.
The primitive
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 payment summary lifted off the page, ending in one button so the surface and its single action read as a unit.
You'll receive
$248.50
card-example.tsx
<NativeCard elevation={2} padding="lg">
<p className="text-sm text-muted-foreground">You'll receive</p>
<p className="mt-1 text-2xl font-semibold">$248.50</p>
<div className="mt-4">
<NativeButton label="Confirm payment" 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 | — |