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

Component Source

<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

Component Source

<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

Prop	Type	Default
children	React.ReactNode	—
defaultOpen	boolean	—
modal	boolean	—
onOpenChange	((open: boolean) => void)	—
open	boolean	—