Overlays

Popover

An anchored panel for rich content: details, small forms, quick filters.

import { PopoverContent } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Details on demand

Show code

popover/details.tsx

'use client';

import {
  Badge,
  Button,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Stack,
  Text,
} from '@jsonresume/ui';

export default function PopoverDetails() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Why 87% match?</Button>
      </PopoverTrigger>
      <PopoverContent arrow aria-label="Match breakdown">
        <Stack gap={3}>
          <Text weight="semibold">Match breakdown</Text>
          <Stack direction="row" gap={2} wrap>
            <Badge tone="success">TypeScript</Badge>
            <Badge tone="success">React</Badge>
            <Badge tone="warning">Go (learning)</Badge>
          </Stack>
          <Text size="xs" tone="muted">
            Based on your skills and the last 3 roles in your resume.
          </Text>
        </Stack>
      </PopoverContent>
    </Popover>
  );
}

Usage

Do

Use for content richer than a sentence.
Give the content an aria-label or a heading.

Don’t

Use for plain hints: use Tooltip.
Put a whole form in one: use Dialog or Sheet.

Accessibility

A non-modal dialog: focus moves in, Escape or clicking outside closes it.

Props

Also accepts the attributes of the element PopoverContent renders.
Prop	Type	Default	Description
arrow	boolean	false	Show a small arrow pointing at the trigger.