Introduction
Components
- Accordion
- Action Sheet
- Alert
- Audio Player
- Audio Recorder
- Audio Waveform
- Avatar
- AvoidKeyboard
- Badge
- BottomSheet
- Button
- Camera
- Camera Preview
- Card
- Carousel
- Checkbox
- Collapsible
- Color Picker
- Combobox
- Date Picker
- File Picker
- Gallery
- Hello Wave
- Icon
- Image
- Input
- Input OTP
- Link
- MediaPicker
- Mode Toggle
- Onboarding
- ParallaxScrollView
- Picker
- Popover
- Progress
- Radio
- ScrollView
- SearchBar
- Separator
- Share
- Sheet
- Skeleton
- Spinner
- Switch
- Table
- Tabs
- Text
- Toast
- Toggle
- Video
- View
Charts
Installation
pnpm dlx bna-ui add card
Usage
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card';<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card>Examples
Default
Simple
With Image
With Form
Statistics
Notification
Pricing
API Reference
Card
The main container component that wraps all card content.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The card content (typically header/content/footer). |
style | ViewStyle | - | Additional styles to apply to the card container. |
CardHeader
Container for the card's header content, typically containing title and description.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The header content (typically CardTitle/CardDescription). |
style | ViewStyle | - | Additional styles to apply to the header container. |
CardTitle
The main title text of the card.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The title text content. |
style | TextStyle | - | Additional styles to apply to the title text. |
CardDescription
Subtitle or description text for the card.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The description text content. |
style | TextStyle | - | Additional styles to apply to the description text. |
CardContent
Container for the main content of the card.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The main content of the card. |
style | ViewStyle | - | Additional styles to apply to the content container. |
CardFooter
Container for the card's footer content, typically containing actions or additional info.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The footer content (typically buttons or actions). |
style | ViewStyle | - | Additional styles to apply to the footer container. |
Design Guidelines
Visual Hierarchy
Cards help establish clear visual hierarchy in your interface:
- Use CardTitle for the primary heading (larger, bolder text)
- Use CardDescription for supporting information (smaller, muted text)
- Organize content logically from header to content to footer
Layout Patterns
Cards work well in various layout patterns:
- Single cards for focused content or forms
- Card grids for displaying multiple related items
- Card lists for sequential content like notifications
- Dashboard cards for metrics and statistics
Content Guidelines
- Keep titles concise and descriptive
- Use descriptions to provide context without overwhelming
- Place primary actions in the footer
- Ensure adequate spacing between sections
Accessibility
The Card component follows accessibility best practices:
- Semantic structure for screen readers
- Proper text hierarchy with heading roles
- Adequate contrast ratios for all text
- Touch-friendly interactive elements
- Keyboard navigation support
Responsive Design
Cards automatically adapt to different screen sizes:
- Flexible width that responds to container constraints
- Proper text scaling on different devices
- Consistent spacing across all screen sizes
- Touch-optimized interactive elements