Thrive Design System

Components

Popover

A floating panel anchored to a trigger element for displaying rich, interactive content in context.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

import { Popover, PopoverTrigger, PopoverContent } from '@thrivecart/ui';

Examples

Basic Popover

Default

Popover with interactive content

<Popover>
<PopoverTrigger asChild>
  <Button variant="secondary">Edit Name</Button>
</PopoverTrigger>
<PopoverContent className="w-80">
  <div className="flex flex-col gap-3">
    <h4 className="font-medium text-sm">Edit Display Name</h4>
    <Input defaultValue="John Doe" />
    <Button size="sm">Save</Button>
  </div>
</PopoverContent>
</Popover>

Best Practices

✓

Keep content focused

Popovers should contain one focused task or piece of information.

✓

Position intelligently

Let the popover auto-position to avoid viewport clipping.

✗

Don't put critical content in popovers

Popovers can be easily dismissed. Use dialogs for important actions.

✗

Don't oversize popovers

If you need more than a small panel's worth of content, use Sheet or Dialog.

Props

Props

Accessibility

  • Focus is moved into the popover when opened.
  • Escape key closes the popover and returns focus to the trigger.
  • Click outside closes the popover.
  • Uses role="dialog" for screen readers.