# Popover

> A light panel anchored to its trigger; opens in 250ms from 97% scale (`.t-dropdown`).

## Facts

- **Product**: Max
- **Family**: Overlays
- **Global**: `window.DigitalCrew.Popover`
- **Source**: `max-agent: src/components/ui/popover.tsx`
- **Import in the app**: `import { Popover } from "@/components/ui/popover";`
- **Live preview**: /design/components/popover/preview.html
- **Page**: /design/components/popover

## Guidelines

**Use it for** small inline editors and pickers (a sending window, a date, a filter). Anything with its own navigation or more than a few fields belongs in a [**Sheet**](/design/components/sheet.md) or [**Dialog**](/design/components/dialog.md).

**What you provide**: `PopoverTrigger` (usually an outline Button, via `asChild`) and `PopoverContent` with `align` (`center` default) and `sideOffset` (4px default). Default width is 288px (`w-72`); set another with `className`.

**Anatomy**: `popover` surface, `border`, `radius-md`, 16px padding, `shadow-md`.

## API

```ts
declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): any;
declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): any;
declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): any;
declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): any;
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "flex justify-center pt-2" },
    h(DC.Popover, { defaultOpen: true },
      h(DC.PopoverTrigger, { asChild: true }, h(DC.Button, { variant: "outline" }, h(I.Clock), "Sending window")),
      h(DC.PopoverContent, { className: "w-80", onOpenAutoFocus: function (e) { e.preventDefault(); } },
        h("div", { className: "grid gap-3" },
          h("div", { className: "grid gap-1" },
            h("p", { className: "text-sm font-medium" }, "Sending window"),
            h("p", { className: "text-sm text-muted-foreground" }, "Mon–Fri · 09:00–17:00 · Europe/Paris")),
          h("div", { className: "grid grid-cols-2 gap-2" },
            h(DC.Input, { defaultValue: "09:00", "aria-label": "From" }),
            h(DC.Input, { defaultValue: "17:00", "aria-label": "To" }))))));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Overlays

- [AlertDialog](/design/components/alert-dialog.md): A blocking confirmation for irreversible or costly actions; same motion and surface as **Dialog**, no close ×, no click-outside dismissal.
- [Command](/design/components/command.md): A keyboard-first search-and-act list (cmdk); the ⌘K menu and the core of every searchable picker.
- [ConfirmDialogProvider](/design/components/confirm-dialog-provider.md): App-wide confirmations through one hook: wrap the app in `ConfirmDialogProvider`, then call `useConfirm().confirm({...})` anywhere.
- [Dialog](/design/components/dialog.md): A modal for focused tasks that need an answer before going on; opens in 250ms from 96% scale and closes in 150ms (`.t-modal`).
- [DiscardChangesDialog](/design/components/discard-changes-dialog.md): An alert dialog that asks the user to confirm throwing away unsaved edits.
- [Drawer](/design/components/drawer.md): A panel that slides in from the bottom edge (or any edge), built on vaul, with a drag handle and swipe-to-dismiss.
- [DropdownMenu](/design/components/dropdown-menu.md): A menu of actions for one object, opening from a button; 250ms in from 97%, 150ms out to 99%.
- [Sheet](/design/components/sheet.md): A panel that slides in from an edge; opens in 400ms and closes in 350ms on the smooth-out ease (`--panel-*`).
- [Tooltip](/design/components/tooltip.md): A short ink label on hover or focus: `foreground` fill with `background` text, 12px, 150ms in after an 80ms delay, 50ms out (`.t-tt`).