Skip to content
DOL Studio

Popover

Design: Stable Code: Coded overlayanchored 8 Figma sets 2 standalone Popover/General/Layout

Live preview

Inline preview (rich popover open by default, anchored)
Simulate · Rich popover — header / body / footer
Simple menu — body only
Placement — top

Import & files

Import
import { Popover } from "@dol/ui/popover";
Source file
packages/@dol/ui/src/popover/Popover.tsx

Figma source

Figma source 8 sets
Page
Popover
Sets
8 + 2 standalone
Primary set
Popover/General/Layout · 2 variants Open in Figma →
Showing: Popover/General/Layout
7 other sets
  • .Item/Tooltip arrow/Bottom 6 variants Figma →
  • .Item/Tooltip arrow/Left 6 variants Figma →
  • .Item/Tooltip arrow/Right 6 variants Figma →
  • .Item/Tooltip arrow/Top 6 variants Figma →
  • Layout/Popover/Footer 2 variants Figma →
  • Layout/Popover/Header 2 variants Figma →
  • Popover 4 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Popover
Slug: `popover`
Domain: general · Category: overlay
Design: stable · Code: coded


## Description
Floating overlay anchored to a trigger - 8 sets cover Tooltip arrow positions (Top / Bot / Left / Right) + content body.


## Import
```ts
import { Popover } from "@dol/ui/popover";
```
Source: `packages/@dol/ui/src/popover/Popover.tsx`


## Figma source
Page: Popover
Sets: 8
Primary: Popover/General/Layout
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=12581-139834

Related

  • M
    overlay

    Modal

    Coded
  • T
    overlay

    Tooltip & Dialog box

    Coded
  • D
    overlay

    Drawer

    Coded
  • M
    overlay

    KidModal

    KIDCoded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).