Popover
ExperimentalShow a small anchored task without a full modal.
Example
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from 'panel-ui-kit/popover';import { Button } from 'panel-ui-kit/button'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Popover> <PopoverTrigger asChild><Button variant="outline">Open options</Button></PopoverTrigger> <PopoverContent aria-label="Options"> <p>Additional options for this view.</p> <PopoverClose asChild><Button>Done</Button></PopoverClose> </PopoverContent> </Popover> </PanelUiTheme> );}When to use
Give content an accessible name. Use Dialog for a larger modal task and Tooltip for noninteractive help.
Keyboard
Enter or Space opens. Focus moves into content. Escape closes and returns to the trigger.
Properties
| Property | Values | Default |
|---|---|---|
open / defaultOpen | boolean | Caller owned |
modal | boolean | false |
side / align | Radix placement on Content | bottom / center |
motion | full · reduced · off · object | Inherited |