Overlays

Popover.

A small set of controls, close to their trigger.

LIVE PREVIEWTry it. It works.

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/popover.json

Registry setup · Open the playground

Usage

<Popover trigger={<Button variant="secondary">Preferences</Button>} title="Preferences">
  <Switch label="Email updates" />
</Popover>

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Built on Base UI Popover. Requires a trigger element and title. Escape and outside press dismiss it; focus returns to the trigger.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.