Popover

Click-triggered floating panel built on Radix Popover primitive with collision detection and focus trapping.

// Radix — @radix-ui/react-popover
import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "@shavin/ui";

Default

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <Heading size="sm" className="font-semibold">Popover title</Heading>
    <Text color="muted" className="mt-1">
      Arbitrary content goes here — forms, menus, previews.
    </Text>
  </PopoverContent>
</Popover>

Alignment

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Align start</Button>
  </PopoverTrigger>
  <PopoverContent align="start">Aligned to the start of the trigger.</PopoverContent>
</Popover>
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Align end</Button>
  </PopoverTrigger>
  <PopoverContent align="end">Aligned to the end of the trigger.</PopoverContent>
</Popover>

Props

Popover takes no props beyond className and the native element's attributes.