Popover

Rich content anchored to a trigger: Colors/surface/overlay, 12px corners, 16px padding and gap. Popover/Filters is the main recipe.

Figma: 10 / Components / Popover

Usage

Source: src/components/ui/popover.tsx

import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from '@/components/ui/popover'

<Popover>
    <PopoverTrigger render={<Button variant='outline' />}>Filters</PopoverTrigger>
    <PopoverContent>
        <PopoverTitle>Filter by source</PopoverTitle>
        {/* checkboxes */}
    </PopoverContent>
</Popover>

When to use

When to reach for it, and when to use something else.

Use it for

Filters and short settings that apply to the current view.

Avoid

Plain hints; use a Tooltip.

Lists of actions; use a DropdownMenu.

API reference

PopoverContent

Prop	Type	Default	Description
side	'top' \| 'bottom' \| 'left' \| 'right'	'bottom'	Where it opens.
align	'start' \| 'center' \| 'end'	'start'	Alignment to the trigger.

PreviousNotificationIndicator NextPostEngagement