Popover
Anchored floating surface on bits-ui Popover. Zoom-fade opens from the trigger corner in 100ms, translates 2px from the anchored side, dismisses on outside click or Esc.
Usage
popover.svelte
<script lang="ts">
import { Popover as PopoverPrimitive } from 'bits-ui';
let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
</script>
<PopoverPrimitive.Root
bind:open
{...restProps}
{...{ 'data-slot': 'popover' } as Record<string, unknown>}
/>
Inverted
Set variant="inverted" for a dark menu floating over a light
app — and a light menu floating over a dark app. Surface tokens swap at the content root, so descendant
rows pick up the contrast automatically.
popover-inverted.svelte
<Popover.Content variant="inverted">
<Popover.Header>
<Popover.Title>Dimensions</Popover.Title>
</Popover.Header>
<p class="text-sm">Inverted surface — signature identity move.</p>
</Popover.Content>Sides
popover-sides.svelte
<script lang="ts">
import { Popover as PopoverPrimitive } from 'bits-ui';
let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
</script>
<PopoverPrimitive.Root
bind:open
{...restProps}
{...{ 'data-slot': 'popover' } as Record<string, unknown>}
/>
Popover.Root props
Inherits bits-ui Popover.Root props via spread.
| Prop | Type | Default | Description |
|---|---|---|---|
boolean (bindable) | false | Controls visibility. Two-way bindable. | |
(open: boolean) => void | — | Fires when the open state changes. |
Popover.Content props
| Prop | Type | Default | Description |
|---|---|---|---|
'top' | 'right' | 'bottom' | 'left' | 'bottom' | Preferred anchor side. Collision logic may flip. | |
'start' | 'center' | 'end' | 'center' | Cross-axis alignment relative to the trigger. | |
number | 4 | Distance in px from the trigger edge. | |
'default' | 'inverted' | 'default' | Surface treatment. Inverted swaps popover/accent CSS vars to render dark on light (and light on dark) — Bloom’s signature menu identity. | |
ComponentProps<Popover.Portal> | — | Forwarded to the internal portal. | |
string | — | Merged onto the floating surface via tailwind-merge. |