Overlays

Popover

A click-triggered non-modal dialog anchored to its trigger.

Client component4 exportsSource

Import

import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from '@the_viveksingh/vivek-ui'

Rich content on click

Unlike a tooltip, a popover can hold interactive content, so it takes focus and closes on Escape or an outside click.

<Popover side="bottom" align="start">
  <PopoverTrigger>What is included?</PopoverTrigger>
  <PopoverContent>
    <Stack gap={2} style={{ maxWidth: '18rem' }}>
      <Text weight="semibold">Everything, at no cost</Text>
      <Text size="sm" tone="muted">All components and charts ship in one MIT-licensed package.</Text>
    </Stack>
  </PopoverContent>
</Popover>

A small form

PopoverClose is a button that closes it, so Cancel needs no state of your own.

<Popover>
  <PopoverTrigger>Rename project</PopoverTrigger>
  <PopoverContent>
    <Stack gap={3} style={{ minWidth: '16rem' }}>
      <Field label="Project name">
        <Input defaultValue="vivek-ui" />
      </Field>
      <Stack direction="horizontal" gap={2} justify="end">
        <PopoverClose>Cancel</PopoverClose>
        <Button size="sm">Save</Button>
      </Stack>
    </Stack>
  </PopoverContent>
</Popover>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Popover
Prop	Type	Default	Description
`children`	`ReactNode`	—	—
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Initial open state while uncontrolled. Default `false`.
`onOpenChange`	`(open: boolean) => void`	—	—
`side`	`Side`	—	Preferred side. Flipped to its opposite when there is no room. Default `'bottom'`.
`align`	`Align`	—	Cross-axis alignment. Default `'center'`.
`offset`	`number`	—	Gap between trigger and panel, px. Default `8`.
`padding`	`number`	—	Minimum distance kept from the viewport edges, px. Default `8`.
`container`	`PortalContainer`	—	Where to portal the panel. Defaults to `document.body`.
`id`	`string`	—	Ids for the trigger/panel pair. Generated when omitted.

Exports

PopoverPopoverClosePopoverContentPopoverTrigger

Rendering

Client component

Popover declares 'use client' because it needs state, effects or event handlers. Importing it into a Server Component creates a client boundary at this component — everything above it stays on the server.