Popover

Rich content anchored to a trigger. Positioned with a fixed-position popper that flips when it would overflow, and dismissed by Escape or an outside press.

src/components/ui/popover.tsx

About

From the component's own source, where it was written.

Rich content anchored to a trigger, dismissed by Escape or an outside press.

Install

npx astralyx-ui add popover

Usage

import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'

<Popover>
  <PopoverTrigger asChild><Button>Settings</Button></PopoverTrigger>
  <PopoverContent>…</PopoverContent>
</Popover>

Composer

Change the props and the source below follows.

Props

side

align

tsx

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open</Button>
  </PopoverTrigger>
  <PopoverContent>…</PopoverContent>
</Popover>

Examples

Placement

tsx

<PopoverContent side="top" align="start" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Popover`

Prop	Type	Default	Description
open	boolean	—	Controlled and uncontrolled open state.
defaultOpen	boolean	false	Controlled and uncontrolled open state.
onOpenChange	(open: boolean) => void	—	Fires on every change.
children	ReactNode	required	—

`PopoverTrigger`

Extends ComponentProps<'button'>.

Prop	Type	Default	Description
asChild	boolean	false	—

`PopoverContent`

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
side	Side	'bottom'	Preferred side. Flips to the opposite one when it would overflow the viewport.
align	Align	'center'	Alignment along the cross axis. Clamped to stay on screen.
offset	number	6	Gap between trigger and panel, in px.

Hooks

Hook	Signature	Description
usePopover	() => PopoverContextValue	—