120k
New

Popover

PreviousNext

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

Installation

pnpm dlx shadcn@latest add @force-ui-svelte/popover

Usage

<script lang="ts">
  import * as Popover from "$lib/components/ui/popover/index.js";
</script>
<Popover.Root>
  <Popover.Trigger>Open Popover</Popover.Trigger>
  <Popover.Content>
    <Popover.Header>
      <Popover.Title>Title</Popover.Title>
      <Popover.Description>Description text here.</Popover.Description>
    </Popover.Header>
  </Popover.Content>
</Popover.Root>

Composition

Use the following composition to build a Popover:

Popover.Root
├── Popover.Trigger
└── Popover.Content

Examples

Basic

A simple popover with a header, title, and description.

Align

Use the align prop on Popover.Content to control the horizontal alignment.

With Form

A popover with form fields inside.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix UI Popover documentation.