Core UI

Popover

Floating panel that displays rich content near a trigger element. Use for contextual information or actions.

Installation

Import 
import { Popover } from '@svelte-atoms/core/popover';

Preset Configuration

Customize the popover appearance using presets

You can customize the default styles for Popover components by defining presets in your configuration:

Examples

Explore different popover variations

Basic Popover

Simple popover with content

Code 
<Popover.Root>
  <Popover.Trigger base={Button}>Open Popover</Popover.Trigger>
  <Popover.Content>
    <div class="max-w-xs p-4">
      <h4 class="mb-2 font-semibold">Popover Title</h4>
      <p class="text-muted-foreground text-sm">
        This is the popover content with some helpful information.
      </p>
    </div>
  </Popover.Content>
</Popover.Root>

Popover Positions

Control popover placement

Code 
<Popover.Root placement="top">
  <Popover.Trigger base={Button} variant="outline">Top</Popover.Trigger>
  <Popover.Content>
    <div class="p-3 text-sm">Top popover</div>
  </Popover.Content>
</Popover.Root>

User Account Menu

Real-world example with controlled state and close button

Popover is closed

Code 
<script lang="ts">
  let isOpen = $state(false);
</script>

<Popover.Root bind:open={isOpen}>
  <Popover.Trigger base={Button} variant="outline">
    Account Settings
  </Popover.Trigger>
  <Popover.Content>
    <div class="w-80 p-4">
      <div class="mb-4 flex items-start justify-between">
        <div>
          <h4 class="font-semibold">User Account</h4>
          <p class="text-muted-foreground text-sm">
            Manage your account settings
          </p>
        </div>
        <Button 
          size="sm" 
          variant="ghost" 
          onclick={() => (isOpen = false)}
        >
          ✕
        </Button>
      </div>
      
      <div class="space-y-3">
        <div class="flex items-center gap-3">
          <div class="bg-primary text-primary-foreground flex h-10 w-10 items-center justify-center rounded-full">
            JD
          </div>
          <div>
            <p class="text-sm font-medium">John Doe</p>
            <p class="text-muted-foreground text-xs">
              john.doe@example.com
            </p>
          </div>
        </div>
        
        <div class="border-border border-t pt-3">
          <Button variant="outline" size="sm" class="w-full">
            Edit Profile
          </Button>
        </div>
      </div>
    </div>
  </Popover.Content>
</Popover.Root>

<p class="text-muted-foreground text-sm">
  Popover is {isOpen ? 'open' : 'closed'}
</p>

API Reference

Popover.Root Props

Prop
Type
Default
Description
open
boolean
false
Open
disabled
boolean
false
Disabled
placements
Placement[]
undefined
Placements
placement
Placement
undefined
Placement
offset
number
0
Offset
portal
string | PortalBond
''
Portal
extend
Record<string, unknown>
''
Extend
factory
Factory<PopoverBond>
undefined
Factory

Popover.Trigger Props

Prop
Type
Default
Description
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

Popover.Content Props

Prop
Type
Default
Description
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

Popover.Indicator Props

Prop
Type
Default
Description
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

Popover.Arrow Props

Prop
Type
Default
Description
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

Accessibility

Built-in Accessibility Features

  • • ARIA attributes (aria-expanded, aria-haspopup)
  • • Keyboard navigation (Escape to close)
  • • Focus management
  • • Screen reader announcements
  • • Click outside to dismiss
Previous
Menu
Next
Radio