Popover

A floating panel anchored to a trigger. Reach for it to surface contextual content — details, forms, quick actions — without navigating away or dimming the page like a dialog. It closes on outside click or Escape. Anatomy: Popover (root, owns open state) wraps a PopoverTrigger (the anchor) and a PopoverContent panel that may contain a PopoverClose button.

A small panel

Unlike a Dialog it does not interrupt: the page stays live behind it and a click outside dismisses it. shadow-md is earned here — the panel renders over other content. It is also the one place focus-visible:outline-none is right: a ring around the whole panel says nothing the panel isn't already saying, and its controls keep their own.

<Popover>
	<PopoverTrigger>
		<Button variant="secondary">Rename</Button>
	</PopoverTrigger>
	<PopoverContent class="w-72 p-3!">
		<div class="space-y-3">
			<div class="space-y-2">
				<Label for="store">Store name</Label>
				<Input id="store" value="Luxe Fashion" />
			</div>
			<PopoverClose>
				<Button class="w-full">Save</Button>
			</PopoverClose>
		</div>
	</PopoverContent>
</Popover>

Side and alignment

side picks the edge it anchors to and align where it sits along that edge; both flip automatically when there is no room. For a list of choices rather than a panel, give the container a small p-1 — p-0 reads as cramped against the rounded corners, and the default p-4 as bloated.

<Popover>
	<PopoverTrigger>
		<Button variant="secondary">Above, aligned start</Button>
	</PopoverTrigger>
	<PopoverContent side="top" align="start" class="w-56 p-1!">
		<div class="flex flex-col text-sm">
			<button class="hover:bg-hover rounded-md px-2 py-1.5 text-left"
				>Duplicate</button
			>
			<button class="hover:bg-hover rounded-md px-2 py-1.5 text-left">Archive</button>
			<button class="hover:bg-hover rounded-md px-2 py-1.5 text-left">Export</button>
		</div>
	</PopoverContent>
</Popover>

API

`Popover`

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Content rendered inside the root, typically a PopoverTrigger and PopoverContent.
`open` bindable	`boolean`	`false`	Bindable open state of the panel. Set to `true` to render it open by default.
`onOpenChange`	`(open: boolean) => void`		Callback fired with the new boolean state whenever the panel opens or closes (forwarded via `...rest`).

`PopoverTrigger`

The clickable anchor for a Popover; toggles the panel's open state. Place inside a Popover root.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Trigger content.
`class`	`string`		Additional Tailwind classes merged onto the trigger element.

`PopoverContent`

The floating panel of a Popover, rendered near its trigger with an enter/exit scale transition. Place inside a Popover root, after a PopoverTrigger.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Panel content.
`class`	`string`		Additional Tailwind classes merged onto the panel.
`align`	`'start'\|'center'\|'end'`	`'center'`	Alignment of the panel relative to the trigger's edge.
`sideOffset`	`number`	`4`	Distance in pixels the panel is pushed from the trigger.
`side`	`'top'\|'right'\|'bottom'\|'left'`		Edge of the trigger the panel anchors against (forwarded via `...rest`).

`PopoverClose`

Dismisses the enclosing Popover when clicked. Place inside a PopoverContent.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Close control content.
`class`	`string`		Additional Tailwind classes merged onto the element.