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 popover
Usage
import {
Popover,
PopoverBody,
PopoverClose,
PopoverContent,
PopoverFooter,
PopoverHeader,
PopoverTrigger,
} from '@/components/ui/popover';<Popover>
<PopoverTrigger>
<Button>Open Popover</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverHeader>
<Text>Popover Title</Text>
</PopoverHeader>
<PopoverBody>
<Text>This is the popover content.</Text>
</PopoverBody>
<PopoverFooter>
<PopoverClose>
<Button variant='outline'>Close</Button>
</PopoverClose>
</PopoverFooter>
</PopoverContent>
</Popover>Examples
Default
Positioning
Alignment
Controlled
Custom Content
Form Content
Menu Style
API Reference
Popover
The root component that manages the popover state and provides context.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The popover trigger and content components. |
open | boolean | false | Controls the open state of the popover. |
onOpenChange | (open: boolean) => void | - | Callback fired when the open state changes. |
PopoverTrigger
The element that triggers the popover when pressed.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The trigger content. |
asChild | boolean | false | When true, merges props with the child element. |
style | ViewStyle | - | Additional styles to apply to the trigger container. |
PopoverContent
The container for the popover content with positioning logic.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The popover content. |
align | 'start' | 'center' | 'end' | center | How to align the popover relative to the trigger. |
side | 'top' | 'right' | 'bottom' | 'left' | bottom | The preferred side of the trigger to position against. |
sideOffset | number | 8 | The distance between the trigger and the popover. |
alignOffset | number | 0 | An offset in pixels from the alignment position. |
style | ViewStyle | - | Additional styles to apply to the content container. |
maxWidth | number | 300 | Maximum width of the popover in pixels. |
maxHeight | number | 400 | Maximum height of the popover in pixels. |
PopoverHeader
A header section for the popover content.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The header content. |
style | ViewStyle | - | Additional styles to apply to the header container. |
PopoverBody
The main content area of the popover.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The body content. |
style | ViewStyle | - | Additional styles to apply to the body container. |
PopoverFooter
A footer section for the popover content.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The footer content. |
style | ViewStyle | - | Additional styles to apply to the footer container. |
PopoverClose
A utility component that closes the popover when pressed.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The close trigger content. |
asChild | boolean | false | When true, merges props with the child element. |
style | ViewStyle | - | Additional styles to apply to the close container. |
Positioning
The popover automatically positions itself relative to the trigger element and adjusts based on available screen space:
- Side: Controls which side of the trigger the popover appears on (
top,right,bottom,left) - Alignment: Controls how the popover aligns relative to the trigger (
start,center,end) - Auto-flipping: When there's insufficient space, the popover automatically flips to the opposite side
- Boundary detection: Ensures the popover stays within screen boundaries with appropriate padding
Accessibility
The Popover component is built with accessibility in mind:
- Proper focus management when opening and closing
- Keyboard navigation support (Escape to close)
- Screen reader compatible with proper ARIA attributes
- Touch-friendly interaction areas
- Respects user's motion preferences