# rn-card
URL: /docs/native/components/card

Versatile card container with header, footer, animations, and pressable support.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-card
```

**Dependencies:**
- [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)

## Usage

```tsx
import { Card } from '@/components/docyrus-native/card';

```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | Card body content |
| `variant` | `'default' \| 'outlined' \| 'elevated' \| 'ghost'` | `'default'` | Visual style variant |
| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Card padding and text sizing |
| `header` | `ReactNode` | — | Header content rendered above body |
| `title` | `string` | — | Card title text |
| `description` | `string` | — | Card description text |
| `footer` | `ReactNode` | — | Footer content rendered below body |
| `onPress` | `() => void` | — | Press handler (makes card pressable) |
| `animation` | `'none' \| 'fade' \| 'scale' \| 'slideUp' \| 'slideDown' \| 'slideLeft' \| 'slideRight'` | `'none'` | Entry animation type |
| `className` | `string` | — | Additional CSS classes |
| `titleClassName` | `string` | — | Title text CSS classes |
| `descriptionClassName` | `string` | — | Description text CSS classes |

## Type Exports

| Type | Description |
|------|-------------|
| `CardProps` | Props for Card component |
| `CardVariant` | `'default' \| 'outlined' \| 'elevated' \| 'ghost'` |
| `CardSize` | `'sm' \| 'md' \| 'lg' \| 'xl'` |
| `CardAnimationType` | `'none' \| 'fade' \| 'scale' \| 'slideUp' \| 'slideDown' \| 'slideLeft' \| 'slideRight'` |