Components
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-cardRequired Packages(1 package)
pnpm add react-native-reanimatedUsage
import { Card } from '@/components/docyrus-native/card';
<Card title="Card Title" description="Card description text.">
<Text>Card body content</Text>
</Card>
<Card variant="elevated" animation="fade" size="lg">
<Text>Elevated card with fade animation</Text>
</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' |