# antuikit / Popover

> Popover with `size`, `shape` and `transition`, and preset colors that fill the whole bubble with readable text.

Docs: https://antuikit.com/docs/components/popover

## Install

npx antuikit@latest init
npx antuikit@latest add popover

## Import

import { Popover } from "@/components/ui/popover";

## Demos

- [Basic](https://ui.antuikit.com/embed/popover/basic.md): Pass `content` for the body and `title` for an optional heading above it, and the popover opens when the trigger is hovered.
- [Sizes](https://ui.antuikit.com/embed/popover/sizes.md): Set `size="small"` for less padding, smaller text and a narrower title, next to the default `medium`, which follows compact mode.
- [Shapes](https://ui.antuikit.com/embed/popover/shapes.md): Set `shape` to `squircle` or `round` to change the bubble's corners, and pair it with `arrow={false}` so the arrow does not sit on the curve.
- [Transition](https://ui.antuikit.com/embed/popover/transition.md): Set `transition={false}` and both mouse delays to `0` so the popover appears and disappears at once, with no zoom.
- [Colors](https://ui.antuikit.com/embed/popover/colors.md): Set `color` to a preset such as `blue`, `purple` or `gold` to fill the popover, with its text kept readable on each fill.
- [Placement](https://ui.antuikit.com/embed/popover/placement.md): Set `placement` to any of 12 positions around the trigger, and the popover flips on its own when it would leave the screen.
- [No arrow](https://ui.antuikit.com/embed/popover/arrow.md): Set `arrow={false}` to hide the arrow and show the popover as a plain floating card next to its trigger.
- [Arrow at center](https://ui.antuikit.com/embed/popover/point-at-center.md): Pass `arrow={{ pointAtCenter: true }}` to aim the arrow at the middle of a wide trigger when the popover is aligned to one edge.
- [Click trigger](https://ui.antuikit.com/embed/popover/triggers.md): Set `trigger` to `click` to keep the popover open until the reader clicks outside it, which content with buttons or links needs.
- [Focus trigger](https://ui.antuikit.com/embed/popover/focus-trigger.md): Set `trigger` to `focus` to show the popover while a field has focus, here a new password's rules ticking off as you type.
- [Hint and panel](https://ui.antuikit.com/embed/popover/hover-with-click.md): Nest a hover `Popover` inside a click one, each controlled, to show a short hint on hover and a full panel on click.
- [Nested popovers](https://ui.antuikit.com/embed/popover/nested.md): Put a `Popover` inside another's `content` to open a second layer from the first, like the owners of a plan.
- [Profile card](https://ui.antuikit.com/embed/popover/user-hover-card.md): An avatar that opens a profile card on click, with the person's name, team tags and a link to their profile.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/popover`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Popover` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.