Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Popover

Popover renders compact positioned supporting content next to its trigger.

CoreOverlays & Menus@gaudi/design-system/core/PopoverView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Popover } from '@gaudi/design-system/core/Popover';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/hover-card-relative-time.json.

Usage

import { Popover } from '@gaudi/design-system';
<Popover trigger='Open popover'>Compact supporting content.</Popover>

Examples

Relative timestamp

Storybook

Rich hover cards

Storybook

Sides

Storybook

Inside a dialog

Storybook

Paged content

Storybook

Sides and alignment

Storybook

Rich content

Storybook

Settings form

Storybook

API

10 props

Accessibility

The trigger is a DS button with aria-expanded; the panel is portalled, dismisses on Escape or an outside click, and returns focus to the trigger. Keep popover content short and non-modal.

AvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesDialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examplesFieldField composes form label, description, error, and input building blocks.7 examplesPillPill renders compact category and status labels.4 examplesSeparatorSeparate related content with a horizontal or vertical rule.3 examplesSliderAdjust one value or a range with pointer and keyboard input.4 examples