Introduction
Components
- Accordion
- Action Sheet
- Alert
- Audio Player
- Audio Recorder
- Audio Waveform
- Avatar
- 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 chart-container
Usage
import { ChartContainer } from '@/components/charts/chart-container';<ChartContainer
title='Monthly Revenue'
description='Revenue data for the last 6 months'
>
{/* Your chart component goes here */}
</ChartContainer>Examples
Default
Custom Styling
API Reference
ChartContainer
A container component that provides consistent styling and layout for charts.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | The title displayed above the chart. |
description | string | - | The description text displayed below the title. |
children | ReactNode | - | The chart component to be wrapped. |
style | ViewStyle | - | Additional styles to apply to the container. |
Accessibility
The ChartContainer component is built with accessibility in mind:
- Uses semantic structure for screen readers
- Proper heading hierarchy with title and description
- Consistent spacing and layout
- Supports dynamic text sizing