Popover
A click-triggered panel anchored to a control, for content that needs more room than a tooltip.
Install
pnpm dlx shadcn@latest add @namche/popoverUsage
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
} from '@/components/ui/popover';
<Popover>
<PopoverTrigger render={<Button variant="outline">Token usage</Button>} />
<PopoverContent>
<PopoverHeader>
<PopoverTitle>78% of monthly quota</PopoverTitle>
<PopoverDescription>Resets in 7 days.</PopoverDescription>
</PopoverHeader>
</PopoverContent>
</Popover>PopoverContent positions itself with side, sideOffset, align, and
alignOffset (defaults: side="bottom", sideOffset={4}, align="center").
PopoverHeader, PopoverTitle, and PopoverDescription are optional layout
helpers — anything else can go directly inside PopoverContent.