Popover

A Popover can be used to display some content when user clicks on another element.

Source

View source code

Issues

Report an issue

Package

@rootui/popover

Reference

React Aria docs

Preview

Click me to open the popover

placement

offset

isKeyboardDismissDisabled

1<Popover>
2  <Popover.Trigger>
3    Click me to open the popover
4  </Popover.Trigger>
5  <Popover.Content>
6    Hello, I'm the content!
7  </Popover.Content>
8</Popover>

Anatomy

1<Popover>
2  <Popover.Trigger></Popover.Trigger>
3  <Popover.Content></Popover.Content>
4</Popover>

Installation

Package

Shadcn CLI

Manual

Note

Please ensure your local environment is fully configured as instructed in the getting started guide.

npm

yarn

pnpm

bun

npm install @rootui/popover

Usage

1import { Popover } from "@rootui/popover";
2
3export default function Page() {
4  return (
5    <Popover>
6      <Popover.Trigger>I'm the trigger</Popover.Trigger>
7      <Popover.Content>I'm the content</Popover.Content>
8    </Popover>
9  )
10}

API Reference

See the React Aria documentation for more information.

Prop	Type	Default
`isOpen`	`Boolean`	`-`
Whether the popover is open by default (controlled).
`defaultOpen`	`Boolean`	`-`
Whether the popover is open by default (uncontrolled).
`onOpenChange`	`(isOpen: boolean) => void`	`-`
Handler that is called when the popover's open state changes.
`children`	`ReactNode`	`-`

Popover.Trigger

Prop	Type	Default
`children`	`ReactNode`	`-`

Prop	Type	Default
`placement`	`'top' \| 'bottom' \| 'right' \| 'left'`	`'bottom'`
The placement of the element with respect to its anchor element.
`showArrow`	`Boolean`	`true`

`arrowProps`	`ComponentProps<'svg'>`	`-`

`customArrow`	`ReactElement`	`-`

`shouldUpdatePosition`	`Boolean`	`false`
Whether the popover content (overlay) should update its position automatically.
`maxHeight`	`Number`	`-`
The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.
`isNonModal`	`Boolean`	`'bottom'`
Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
`isKeyboardDismissDisabled`	`Boolean`	`false`
Whether pressing the escape key to close the popover should be disabled.
`isOpen`	`Boolean`	`-`
Whether the overlay is open by default (controlled).
`defaultOpen`	`Boolean`	`-`
Whether the overlay is open by default (uncontrolled).
`onOpenChange`	`Boolean`	`(isOpen: boolean) => void`

`shouldFlip`	`Boolean`	`true`
Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
`offset`	`Number`	`8`
The additional offset applied along the main axis between the element and its anchor element.
`crossOffset`	`Number`	`0`
The additional offset applied along the cross axis between the element and its anchor element.

Attribute	Description
`data-trigger="..."`	The name of the component that triggered the popover, e.g. "DialogTrigger" or "ComboBox".
`data-placement="left \| right \| top \| bottom"`	The placement of the popover relative to the trigger.
`data-entering`	Whether the popover is currently entering. Use this to apply animations.
`data-exiting`	Whether the popover is currently exiting. Use this to apply animations.

CSS variable	Description
`--trigger-width`	The width of the popover trigger element.
`--trigger-anchor-point`	The position of the trigger relative to the popover. Use with transform-origin when applying scale transitions.