# Card

Card surface with header, title, content and footer slots and a softly lit edge. It can reveal its parts in reading order as it appears, and its edge can brighten as you press it.

> Composed · Free · Layout — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add card
```

## Import

```tsx
import { Card } from "@/components/ui/card/card";
```

## Variants

- `glass` — Glass: `npx @lumioui/cli add card-glass`
- `profile` — Profile: `npx @lumioui/cli add card-profile`
- `ticket` — Ticket: `npx @lumioui/cli add card-ticket`

## Props

### Card

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |
| `variant?` | `"elevated" | "outlined" | "filled" | "glass"` | Surface voice — "elevated" (default, soft shadow on card color),  "outlined" (hairline border, no shadow — the paper-canvas idiom),  "filled" (tonal secondary fill, no shadow),  "glass" (glass material — floating panels over content). |
| `onPress?` | `(e: GestureResponderEvent) => void` | Makes the card pressable: spring scale + light haptic. |
| `haptic?` | `"light" | "medium" | "heavy" | "selection" | false` | Haptic on press. Default "light"; false to disable. |
| `disabled?` | `boolean` | — |
| `appear?` | `boolean` | Switch the card on as it mounts (opt-in): its parts start dim, one sheen crosses the surface, then each direct child switches on in reading order. Default false. |
| `pressLight?` | `boolean` | Pressable cards only (opt-in): the lit edge brightens with press depth (to ~1.6× its strength) as well as the scale dip. Default false. |

### CardText

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |

Source: https://lumioui.com/components/card