Popover

Show rich content in a floating panel anchored to a trigger.

React, Vue, Solid, and Svelte

SourceRecipeArk UI docs

Built on Ark UI's Popover. Popover.Header, Popover.Body and Popover.Footer lay out the content, and Popover.CloseTrigger closes it.

Usage

import { Portal } from "@ark-ui/react/portal"
import { Button } from "@isbatak/react-ui/button"
import { Popover } from "@isbatak/react-ui/popover"

export function PopoverDemo() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <Button variant="outline">Show details</Button>
      </Popover.Trigger>
      <Portal>
        <Popover.Positioner>
          <Popover.Content>
            <Popover.Arrow>
              <Popover.ArrowTip />
            </Popover.Arrow>
            <Popover.Header>
              <Popover.Title>Release notes</Popover.Title>
              <Popover.Description>What changed in this version.</Popover.Description>
            </Popover.Header>
            <Popover.Footer>
              <Popover.CloseTrigger asChild>
                <Button size="sm">Got it</Button>
              </Popover.CloseTrigger>
            </Popover.Footer>
          </Popover.Content>
        </Popover.Positioner>
      </Portal>
    </Popover.Root>
  )
}