Components
Popover
An anchored native popover with a trigger, placement, and bindable visibility.
Props
Native attributes and event handlers are forwarded to the underlying div element unless
handled by the component.
TriggerProps contains button IDs, ARIA attributes, native popover target attributes,
onclick, style, and type. Spread the complete object onto the trigger. The default trigger reads
Toggle popover.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content snippet rendered by the component. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLDivElement | null | null | Bindable reference to the underlying DOM element. |
gap | number | 8 | Distance in pixels between the trigger and floating content. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | false | Bindable visibility state. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
placement | Placement | 'bottom' | Preferred side of the trigger; Popover can flip to fit the viewport. |
popover | Exclude<HTMLAttributes<HTMLDivElement>['popover'], '' | null | undefined> | 'auto' | Native popover mode. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
trigger | Snippet<[TriggerProps]> | defaultTrigger | Trigger snippet receiving button attributes; spread them onto your button. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Popover from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Popover in the built-in themes is shown below.
compact — Apply the compact variant.
Loading...elevated — Apply the elevated variant.
Loading...flat — Apply the flat variant.
Loading...outline — Apply the outline variant.
Loading...soft — Apply the soft variant.
Loading...spacious — Apply the spacious variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Change placement, gap while retaining the default component styling.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...Custom trigger
Spread the provided trigger attributes onto your button to preserve toggling and positioning.
Loading...