Components / Popover

Popover

Lightweight content anchored to a trigger: a small form, a date picker, an inline explainer. Blocking decisions go to Dialog or AlertDialog; plain labels are Tooltips.

import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '@layers/ui/popover'

Rendered stock

House rules

• Triggers attach via render={<Button />}; there is no asChild in the Base UI wrappers.
• PopoverContent spaces its direct children with a built-in gap. Never wrap everything in one form: the form becomes the only child and the gap collapses. The header stays a sibling; the form wraps only its fields.
• A one-off width on PopoverContent is the allowed exception to the no-inline-Tailwind rule.
• PopoverContent can anchor to a non-trigger element via the anchor prop, a Layers addition used by hashtag autocomplete and the schedule day cells.