build69
Sign inGet API key
build69  /  Components  /  Overlays  /  Popover

Popover

v1.0.7Updated 27 Aug 2026

Floating panel anchored to a trigger (Radix). Used for date pickers, mini-forms, info bubbles. Adds header / body / footer slot composition, search input slot, sectioned items, tonal variants, and a form-popover layout.

View source← Back to catalog

Preview

Live · 13 stories
DefaultOpen ↗
▸Why this is recommendedfloatingoverlaytooltippanel+2

The default, out-of-the-box Popover.

Recommended for+14
  • ✓Mini-forms
  • ✓Date pickers (Calendar inside)
  • ✓Filter editors
  • ✓Quick action menus
  • ✓Searchable pickers
Tags+6
floatingoverlaytooltippanelsearchdefault
Features+4
  • Click-outside close
  • Positioning relative to trigger
  • Focus management
  • Header / body / footer slots
  • Search input slot
  • Sectioned items with dividers
  • Tonal variants
  • Form-popover layout
Not recommended for−2
  • ✕Hover hints (use Tooltip)
  • ✕Modals (use Dialog)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Popover" })

Usage

import { Popover } from '@/components/overlays/popover';

<Popover trigger={<Button>Filters</Button>}>
  <Popover.Header>Filters</Popover.Header>
  <Popover.Body>…</Popover.Body>
</Popover>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
tone

Tone colour

'default' | 'info' | 'warning'—
search

Show search input slot

boolean—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files