Popover

Displays rich content in a portal, triggered by a button.

Basic

Sides

With Form

Alignments

In Dialog

<script lang="ts">
  import { Example, ExampleWrapper } from '@sveltery/components/example';
  import { Button } from '@sveltery/components/button';
  import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@sveltery/components/dialog';
  import { Field, FieldGroup, FieldLabel } from '@sveltery/components/field';
  import { Input } from '@sveltery/components/input';
  import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '@sveltery/components/popover';

  const topSides = ['inline-start', 'left', 'top'] as const;
  const bottomSides = ['bottom', 'right', 'inline-end'] as const;
</script>

{#snippet PopoverBasic()}
  <Example title="Basic">
    <Popover>
      <PopoverTrigger>
        {#snippet render(props, _state, content)}<Button variant="outline" class="w-fit" {...props}>{@render content?.()}</Button>{/snippet}
        Open Popover
      </PopoverTrigger>
      <PopoverContent align="start">
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  </Example>
{/snippet}

{#snippet PopoverSides()}
  <Example title="Sides">
    <div class="flex flex-col gap-2">
      {#each [topSides, bottomSides] as sides (sides[0])}
        <div class="flex flex-wrap gap-2">
          {#each sides as side (side)}
            <Popover>
              <PopoverTrigger>
                {#snippet render(props, _state, content)}<Button variant="outline" class="w-fit capitalize" {...props}>{@render content?.()}</Button>{/snippet}
                {side.replace('-', ' ')}
              </PopoverTrigger>
              <PopoverContent {side} class="w-40">
                <p>Popover on {side.replace('-', ' ')}</p>
              </PopoverContent>
            </Popover>
          {/each}
        </div>
      {/each}
    </div>
  </Example>
{/snippet}

{#snippet PopoverWithForm()}
  <Example title="With Form">
    <Popover>
      <PopoverTrigger>
        {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
        Open Popover
      </PopoverTrigger>
      <PopoverContent class="w-64" align="start">
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
        </PopoverHeader>
        <FieldGroup class="gap-4">
          <Field orientation="horizontal">
            <FieldLabel for="width" class="w-1/2">Width</FieldLabel>
            <Input id="width" defaultValue="100%" />
          </Field>
          <Field orientation="horizontal">
            <FieldLabel for="height" class="w-1/2">Height</FieldLabel>
            <Input id="height" defaultValue="25px" />
          </Field>
        </FieldGroup>
      </PopoverContent>
    </Popover>
  </Example>
{/snippet}

{#snippet PopoverAlignments()}
  <Example title="Alignments">
    <div class="flex gap-6">
      <Popover>
        <PopoverTrigger>
          {#snippet render(props, _state, content)}<Button variant="outline" size="sm" {...props}>{@render content?.()}</Button>{/snippet}
          Start
        </PopoverTrigger>
        <PopoverContent align="start" class="w-40">Aligned to start</PopoverContent>
      </Popover>
      <Popover>
        <PopoverTrigger>
          {#snippet render(props, _state, content)}<Button variant="outline" size="sm" {...props}>{@render content?.()}</Button>{/snippet}
          Center
        </PopoverTrigger>
        <PopoverContent align="center" class="w-40">Aligned to center</PopoverContent>
      </Popover>
      <Popover>
        <PopoverTrigger>
          {#snippet render(props, _state, content)}<Button variant="outline" size="sm" {...props}>{@render content?.()}</Button>{/snippet}
          End
        </PopoverTrigger>
        <PopoverContent align="end" class="w-40">Aligned to end</PopoverContent>
      </Popover>
    </div>
  </Example>
{/snippet}

{#snippet PopoverInDialog()}
  <Example title="In Dialog">
    <Dialog>
      <DialogTrigger>
        {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
        Open Dialog
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Popover Example</DialogTitle>
          <DialogDescription>Click the button below to see the popover.</DialogDescription>
        </DialogHeader>
        <Popover>
          <PopoverTrigger>
            {#snippet render(props, _state, content)}<Button variant="outline" class="w-fit" {...props}>{@render content?.()}</Button>{/snippet}
            Open Popover
          </PopoverTrigger>
          <PopoverContent align="start">
            <PopoverHeader>
              <PopoverTitle>Popover in Dialog</PopoverTitle>
              <PopoverDescription>
                This popover appears inside a dialog. Click the button to open it.
              </PopoverDescription>
            </PopoverHeader>
          </PopoverContent>
        </Popover>
      </DialogContent>
    </Dialog>
  </Example>
{/snippet}

<ExampleWrapper>
  {@render PopoverBasic()}
  {@render PopoverSides()}
  {@render PopoverWithForm()}
  {@render PopoverAlignments()}
  {@render PopoverInDialog()}
</ExampleWrapper>

Installation

Install the dependencies

pnpm add cn class-variance-authority github:sveltery/base

Copy the component

Copy the following files into src/lib/components/ui/popover.

src/lib/components/ui/popover/PopoverContent.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Popover as Primitive } from '@sveltery/base/popover';
  import { cn } from 'cn';
  let {
    children,
    class: classProp,
    align = 'center',
    alignOffset = 0,
    side = 'bottom',
    sideOffset = 4,
    ...props
  }: ComponentProps<typeof Primitive.Popup> & Pick<ComponentProps<typeof Primitive.Positioner>, 'align' | 'alignOffset' | 'side' | 'sideOffset'> = $props();
</script>
<Primitive.Portal>
  <Primitive.Positioner {align} {alignOffset} {side} {sideOffset} class="isolate z-50">
    <Primitive.Popup data-slot="popover-content" {...props} class={cn('bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-72 origin-(--transform-origin) outline-hidden', classProp)}>
      {@render children?.()}
    </Primitive.Popup>
  </Primitive.Positioner>
</Primitive.Portal>

src/lib/components/ui/popover/PopoverDescription.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Popover as Primitive } from '@sveltery/base/popover';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.Description> = $props();
</script>
<Primitive.Description data-slot="popover-description" {children} {...props} class={cn('text-muted-foreground', classProp)} />

src/lib/components/ui/popover/PopoverHeader.svelte

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: HTMLAttributes<HTMLDivElement> = $props();
</script>
<div data-slot="popover-header" {...props} class={cn('flex flex-col gap-0.5 text-sm', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/popover/PopoverTitle.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Popover as Primitive } from '@sveltery/base/popover';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.Title> = $props();
</script>
<Primitive.Title data-slot="popover-title" {children} {...props} class={cn('font-medium', classProp)} />

src/lib/components/ui/popover/PopoverTrigger.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Popover as Primitive } from '@sveltery/base/popover';
  let { children, ...props }: ComponentProps<typeof Primitive.Trigger> = $props();
</script>
<Primitive.Trigger data-slot="popover-trigger" {children} {...props} />

src/lib/components/ui/popover/index.ts

import { Popover as Primitive } from '@sveltery/base/popover';

export const Popover = Primitive.Root as typeof Primitive.Root;
export { default as PopoverTrigger } from './PopoverTrigger.svelte';
export { default as PopoverContent } from './PopoverContent.svelte';
export { default as PopoverHeader } from './PopoverHeader.svelte';
export { default as PopoverTitle } from './PopoverTitle.svelte';
export { default as PopoverDescription } from './PopoverDescription.svelte';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '$lib/components/ui/popover';
</script>

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Dimensions</PopoverTitle>
      <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

Bind open to read or change the state from outside.

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

<Popover bind:open>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent side="right" align="start">Content</PopoverContent>
</Popover>