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 separator
Usage
import { Separator } from '@/components/ui/separator';<Separator />Examples
Default
Vertical
Custom Thickness
Custom Colors
Spacing Variants
API Reference
Separator
A component that creates visual separation between content elements.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the separator. |
style | ViewStyle | - | Additional styles to apply to the separator. |
Accessibility
The Separator component is built with accessibility in mind:
- Uses appropriate semantic structure for screen readers
- Provides visual separation that maintains proper contrast ratios
- Works well with keyboard navigation flows
- Respects system accessibility settings for reduced motion