Popover

The Popover component is a flexible UI element that can be used to display additional information or actions without taking the user away from the current context. It is commonly used for tooltips, dropdowns, and context menus. Uses @floating/ui .

Playground

The code in playgrounds is shortened for simplicity.

Explore and experiment with the Popover component using the uncontrolled and controlled playgrounds below:

In the uncontrolled variant, the open and close behavior of the Popover is managed internally:

Open

In the controlled variant, you can manage the open and close behavior of the Popover externally through props:

Open

Full code example


import {
  ClearButton,
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverHeading,
  PopoverTrigger,
  Switch,
} from '@creation-ui/react'
 
export const PopoverExampleUncontrolled = () => {
  return (
    <Popover>
      <PopoverTrigger>Open</PopoverTrigger>
      <PopoverContent className='w-52'>
        <PopoverHeading>Popover</PopoverHeading>
        <PopoverDescription className='pt-2'>
          In the uncontrolled variant, the open and close behavior of the
          Popover is managed internally.
        </PopoverDescription>
        <br />
        <PopoverClose>Dismiss</PopoverClose>
      </PopoverContent>
    </Popover>
  )
}

Component API

For detailed configuration options, refer to the Popover API in the props table below:

Main wrapper component for the Popover feature.

Prop	Default	Description
`children`	—	`React.ReactNode` Children to be rendered inside the component
`className`	—	`string` Class names to add to wrapper component
`initialOpen`	`false`	`boolean` Initial open state
`placement`	—	`Placement` Placement of the popover relative to the trigger element
`modal`	—	`boolean` Whether the popover should be modal
`open`	—	`boolean` State of popover
`onOpenChange`	—	`(open: boolean) => void`

This component is required for uncontrolled approach and is used to trigger the Popover.

Prop	Default	Description
`onClick`	—	`() => void` Callback function called on element click
`asChild`	—	`boolean` Allows the user to pass any element as the anchor
`children`	—	`React.ReactNode` Children to be rendered inside the component
`className`	—	`string` Class names to add to wrapper component

This component is optional and can be used to present popover content.

Prop	Default	Description
`children`	—	`React.ReactNode` Children to be rendered inside the component
`className`	—	`string` Class names to add to wrapper component

This component is optional and can be used to provide a heading for the Popover.

Prop	Default	Description
`children`	—	`React.ReactNode` Children to be rendered inside the component
`className`	—	`string` Class names to add to wrapper component

This component is optional and can be used to provide additional information about the Popover.

Prop	Default	Description
`children`	—	`React.ReactNode` Children to be rendered inside the component
`className`	—	`string` Class names to add to wrapper component

Closing trigger

Prop	Default	Description
`children`	—	`React.ReactNode` Children to be rendered inside the component
`className`	—	`string` Class names to add to wrapper component

Popover

Playground

Uncontrolled Popover

Controlled Popover

Full code example

Component API