Components · Overlays

Popover

A click-triggered floating panel for secondary content or a small form — richer than a tooltip, lighter than a dialog. It sits on the popover surface with a hairline border and shadow-md, anchored to the control that opened it.

Preview

The panel surface across the three themes. The framework anchors it to its trigger.

Light

Dark

Accessibility

Spec

Values and token references straight from the Zetta spec.

popover

backgroundColor: {colors.popover}
textColor: {colors.popover-foreground}
borderColor: {colors.hairline}
borderWidth: 1px
borderRadius: {rounded.base}
shadow: {shadows.md}
padding: {spacing.md}
minWidth: 200px

Build with the skill

No package to install — hand this to your AI to generate the popover in your stack.

Prompt for your AI

Implement the Zetta "Popover" component in this project's stack using the zetta-design-md skill.

- Apply the `popover` spec from the skill (variants: default).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

Popover surface, 1px hairline, base radius, shadow-md, medium padding, min-width 200px. Non-modal: the page behind stays interactive.
Use for optional detail or a compact form. Reach for a Dialog when the task demands focus and a scrim.

Accessibility

Open on click/Enter/Space; close on Escape and outside click. Move focus into the panel and restore it to the trigger on close.

Known gaps

Arrow/caret and placement tokens are not specified. Modal vs non-modal nesting behaviour is left to the framework primitive.