Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/popover.jsonUsage
<script lang="ts">
import * as Popover from "$lib/components/ui/popover/index.js";
</script>
<Popover.Root>
<Popover.Trigger>Open Popover</Popover.Trigger>
<Popover.Popup>
<Popover.Title>Popover Title</Popover.Title>
<Popover.Description>Popover Description</Popover.Description>
<Popover.Close>Close</Popover.Close>
</Popover.Popup>
</Popover.Root>API Reference
Popover.Root
Root component. Wraps Popover.Root from Shards UI.
Popover.Trigger
Trigger button that opens the popover. Wraps Popover.Trigger from Shards UI.
Popover.Popup
Popup container that displays the popover content. Also exported as Popover.Content.
| Prop | Type | Default | Description |
|---|---|---|---|
tooltipStyle | boolean | false | When true, applies tooltip-like styling (smaller padding, arrow) |
side | "top" \| "bottom" \| "left" \| "right" | "bottom" | Side of the trigger to position the popup |
align | "start" \| "center" \| "end" | "center" | Alignment relative to the trigger |
sideOffset | number | 4 | Distance from the trigger in pixels |
alignOffset | number | 0 | Offset along the alignment axis |
portalProps | ComponentProps<typeof Popover.PopoverPrimitive.Portal> | - | Props forwarded to the internal portal (keepMounted, container, etc.); see the Shards UI Popover portal API |
Popover.Title
Title text for the popover. Styled wrapper for Popover.Title from Shards UI.
Popover.Description
Description text for the popover. Styled wrapper for Popover.Description from Shards UI.
Popover.Close
Close button for the popover. Wraps Popover.Close from Shards UI.
Popover.PopoverCreateHandle
Creates a handle for detached popover triggers. Returns a handle object to attach to multiple triggers.
Examples
With Close Button
Tooltip Style
Use the tooltipStyle prop to make a popover look like a tooltip. This is recommended when you have an info icon button whose only purpose is to show additional information. See the tooltip accessibility guidelines for best practices.
Animated Popovers
You can create animated popovers that smoothly transition between different triggers using detached triggers. This pattern allows multiple triggers to share a single popover popup, with automatic animations for position, size, and content changes.
To create detached triggers:
- Create a handle using
Popover.PopoverCreateHandle - Attach the same handle to multiple
Popover.Triggercomponents - Each trigger provides a
payloadprop containing a content snippet - Use a single
Popover.Rootcomponent with the handle to render the popup