Popovershadcn
A small panel anchored to a trigger.
Overlays- Install
- npx shadcn add popover
- Import from
- @/components/ui/popover
- Guidance
- draft · v0.1.0
Examples
As installed from shadcn – rendering in jsp-ds tokens through the bridge.
Guidance
When to use
- A small panel tied to its trigger: a quick edit, a date, extra detail with controls in it.
When not to use
- For a full task – use a Dialog.
- For a label on hover – use a Tooltip.
Rules
- Keep it small: one task, a few controls.
- It closes on Esc and on clicking outside; changes inside should save or be clearly cancelled.
Spec
The variables this component reads, and the jsp-ds token behind each, resolved live. Switch mode to see them change.
| Token | CSS variable | Value now |
|---|---|---|
| color.surface.defaultT-3: surface.overlay to come | --popover | … |
| color.text.default | --popover-foreground | … |
| color.border.subtle | --border | … |
| shadow.lg | --shadow-lg | … |
Install
Terminal
npx shadcn add popoverImport
import { Popover } from "@/components/ui/popover"From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.