Component

Popover

Displays interactive floating content from a trigger.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/popover

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Popover.Root>
  <Popover.Trigger>Open popover</Popover.Trigger>
  <Popover.Content>Quick actions go here.</Popover.Content>
</Popover.Root>
Theme
<Popover.Root>
  <Popover.Trigger>Filters</Popover.Trigger>
  <Popover.Content side="bottom" align="start">
    Filter controls render below the trigger.
  </Popover.Content>
</Popover.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`scrollable``boolean`No-Cap height to the available space and scroll within (with overscroll<br /> containment) instead of overflowing — for tall panels like filter lists.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`scrollable``true`, `false`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/popover.json`
  • Recipe: `popover`
  • Files: `src/components/ui/popover.tsx`