Popover

Overlay

A generic floating panel triggered by clicking its trigger slot. Can contain any content.

Props

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Preferred side to open.
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment relative to the trigger.

Examples

Basic

vue

<DsPopover side="bottom" align="start">
  <template #trigger>
    <DsButton variant="outline">Open popover</DsButton>
  </template>
  <div class="space-y-2">
    <p class="text-sm font-medium text-ds-fg">Panel title</p>
    <p class="text-xs text-ds-fg-muted">Any content can go here — forms, links, lists.</p>
    <DsButton size="sm" class="w-full">Action</DsButton>
  </div>
</DsPopover>

Skeleton

Use DsPopoverSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsPopoverSkeleton />

Accessibility

role="dialog" on the floating panel.
Click outside closes.

Modal

Sheet