ComponentsOverlays
Popover
Rich content anchored to a trigger, for small bits of extra UI.
Theme
Motion
Rich content anchored to a trigger, for small bits of extra UI.
<Popover>
<PopoverTrigger asChild>
<Button variant="outline">Open popover</Button>
</PopoverTrigger>
<PopoverContent>
<p className="font-medium">Dimensions</p>
<p className="mt-1 text-muted-foreground">Set the size of the canvas.</p>
</PopoverContent>
</Popover>The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { Popover, PopoverTrigger, PopoverContent, PopoverClose } from "junco";
<Popover>
<PopoverTrigger asChild>
<Button variant="outline">Share</Button>
</PopoverTrigger>
<PopoverContent align="end">…</PopoverContent>
</Popover>Focus moves into the popover, so the field is ready to type in.
Popover#opendefaultOpenonOpenChangemodal| Prop | Type | Default |
|---|---|---|
openControlled open state. | boolean | – |
defaultOpenInitial open state when uncontrolled. | boolean | false |
onOpenChangeCalled when it opens or closes. | (open: boolean) => void | – |
modalBlock interaction with the rest of the page while open. | boolean | false |
PopoverContent#Rendered in a portal and kept on screen automatically.
sidealignsideOffsetcollisionPaddingclassName| Prop | Type | Default |
|---|---|---|
sidePreferred side; flips when there isn't room. | "top" | "right" | "bottom" | "left" | "bottom" |
alignAlignment against the trigger. | "start" | "center" | "end" | "center" |
sideOffsetGap from the trigger in px. | number | 6 |
collisionPaddingSpace kept from the viewport edges. | number | 8 |
classNameDefault width is 18rem; override it here. | string | – |
PopoverTrigger / PopoverClose / PopoverAnchor#asChild| Prop | Type | Default |
|---|---|---|
asChildUse your own element. PopoverAnchor positions against something other than the trigger. | boolean | false |
| Key | Action |
|---|---|
| Enter | Opens the popover from the trigger. |
| Esc | Closes it and returns focus to the trigger. |
| Tab | Moves through the popover's content. |