---
title: "Popover"
description: "Brief content anchored to a trigger: a summary, a definition or a few data points. It has a title, an optional description and its own close control."
kind: component
id: C-034
registry: "popover"
docs: "https://koten.codehive.com.co/components/popover"
markdown: "https://koten.codehive.com.co/md/components/popover.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/popover.json"
language: en
---

# Popover · ポップオーバー

> Component C-034 in the Koten UI catalog.

Brief content anchored to a trigger: a summary, a definition or a few data points. It has a title, an optional description and its own close control.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/popover.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/popover.json
```

## Files

- `@/components/ui/popover.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Requirements

- **portal** — Portaled popup: The popup mounts in BasePopover.Portal and is placed next to the trigger; do not nest it in cells or panels with overflow.

## Reference

- Upstream primitive: https://base-ui.com/react/components/popover

## Examples

### Stock summary

A short definition list; the popover does not need actions to be useful.

```tsx
<Popover
  trigger={<Button variant="outline">View summary</Button>}
  title="Stock by warehouse"
  description="Updated 5 minutes ago"
  closeLabel="Close"
>
  <dl className="grid grid-cols-[1fr_auto] gap-x-3 gap-y-1">
    <dt>Tokyo</dt>
    <dd className="text-end tabular-nums">52</dd>
    <dt>Osaka</dt>
    <dd className="text-end tabular-nums">18</dd>
    <dt>Sapporo</dt>
    <dd className="text-end tabular-nums">4</dd>
  </dl>
</Popover>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `trigger` | `ReactElement` | `—` | The element that opens the popover and anchors its position. |
| `title` | `ReactNode` | `—` | Required: BasePopover.Title names the popup. |
| `description` | `ReactNode` | `—` | Optional; adds context under the title. |
| `children` | `ReactNode` | `—` | Brief content; if it needs scrolling, it probably belongs in a Dialog. |
| `closeLabel` | `string` | `—` | Accessible text for the icon-only close control. |
| `className` | `string` | `—` | Merged with the 18 rem width and the overlay shadow. |

## Accessibility

- Title provides the accessible name and description adds context when it carries information.
- Focus enters the popup on open and returns to the trigger with Escape or the close button.
- It must not hold the only path to an important action: that action belongs on the page.

## Sources

- Catalog page: https://koten.codehive.com.co/components/popover
- Markdown: https://koten.codehive.com.co/md/components/popover.md
- Repository: https://github.com/codehive-colombia/koten