Popover

stable

Floating translucent panel anchored to a trigger, with focus management and origin-aware motion.

@kura-ui/react/popoverCopy page for agents.md registry.json

minimal

Controlled settings panel

full

A chat header whose Share button opens a visibility picker and a copy-link row.

composition

14 messages · Private

npx shadcn@latest add https://kuro.abstergo.fyi/r/popover.json

Copies the source into components/kura/popover with its dependencies (kura-theme, utils). Tokens come from the kura-theme item.

Small interactive panels: settings for a composer, a model's details, a share menu, a filter form.
Content anchored to a control that should not navigate away.

Plain hover labels — use tooltip.
Choosing a model — use model-picker. Slash commands — use slash-command-menu. Global search — use command-palette.
Blocking decisions — use a dialog or approval-prompt.

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	—	Initial open state when uncontrolled.
onOpenChange	(open: boolean) => void	—	Called when the open state changes.
modal	boolean	false	Trap focus and block outside interaction.

All native attributes of the root element, className and ref pass through.

PopoverRoot; owns open state.data-slot="popover"
PopoverTriggerToggles the popover. Use asChild with a Button.data-slot="popover-trigger"
PopoverAnchorOptional alternative positioning anchor.data-slot="popover-anchor"
PopoverContentThe floating panel (portalled). Accepts side, align, sideOffset.data-slot="popover-content"
PopoverCloseCloses the popover. Use asChild with a Button.data-slot="popover-close"

Role: dialog
Trigger gets aria-expanded and aria-controls; focus moves into the content on open and returns on close.
Give the content an accessible name (aria-label or a heading with aria-labelledby).
Reduced motion: Scale and travel are removed; content fades.

Always use `<PopoverTrigger asChild><Button …/></PopoverTrigger>` to avoid nested buttons.