Components · Overlays

Hover card

A rich preview that appears when a pointer rests on a link or name — a profile, a file, a reference. It shares the popover surface and shadow-md elevation, capped at 320px. Because it is hover-only, treat everything inside as non-essential.

Preview

The card 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.

hover-card

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

Build with the skill

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

Prompt for your AI

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

- Apply the `hover-card` 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, max-width 320px.
Hover-only and supplementary by definition — never hide essential information or the only path to an action behind it. Pair with a click affordance for touch and keyboard users.

Accessibility

Open on hover and focus with a short delay; dismiss on Escape and blur. Not a substitute for a real link or button.

Known gaps

Open/close delay timings and arrow/placement tokens are not specified.