Popover | Bearnie

<Popover>
  <PopoverTrigger>
    <Button variant="outline">Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>This is the popover content.</p>
  </PopoverContent>
</Popover>

Installation

npx bearnie add popover

Usage

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@/components/bearnie/popover"

<Popover>
  <PopoverTrigger>
    <Button>Open</Button>
  </PopoverTrigger>
  <PopoverContent>
    Content goes here.
  </PopoverContent>
</Popover>

Examples

Side bottom

<Popover>
  <PopoverTrigger>
    <Button variant="outline">Bottom</Button>
  </PopoverTrigger>
  <PopoverContent side="bottom">
    <p>Popover opens below the trigger.</p>
  </PopoverContent>
</Popover>

Side top

<Popover>
  <PopoverTrigger>
    <Button variant="outline">Top</Button>
  </PopoverTrigger>
  <PopoverContent side="top">
    <p>Popover opens above the trigger.</p>
  </PopoverContent>
</Popover>

Side right

<Popover>
  <PopoverTrigger>
    <Button variant="outline">Right</Button>
  </PopoverTrigger>
  <PopoverContent side="right">
    <p>Popover opens to the right.</p>
  </PopoverContent>
</Popover>

Side left

<Popover>
  <PopoverTrigger>
    <Button variant="outline">Left</Button>
  </PopoverTrigger>
  <PopoverContent side="left">
    <p>Popover opens to the left.</p>
  </PopoverContent>
</Popover>

With form

<Popover>
  <PopoverTrigger>
    <Button variant="outline">Open dimensions</Button>
  </PopoverTrigger>
  <PopoverContent class="w-80">
    <div class="grid gap-4">
      <div class="space-y-2">
        <h4 class="font-medium leading-none">Dimensions</h4>
        <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
      </div>
      <div class="grid gap-2">
        <div class="grid grid-cols-3 items-center gap-4">
          <Label for="width">Width</Label>
          <Input id="width" value="100%" class="col-span-2 h-8" />
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
          <Label for="height">Height</Label>
          <Input id="height" value="25px" class="col-span-2 h-8" />
        </div>
      </div>
    </div>
  </PopoverContent>
</Popover>

Anatomy

Popover - The root container
PopoverTrigger - The element that opens the popover
PopoverContent - The floating content panel

Props

PopoverContent

Prop	Type	Default	Description
side	top \| right \| bottom \| left	bottom	Position relative to trigger
align	start \| center \| end	center	Horizontal alignment
class	string	-	Additional CSS classes

All other Popover components accept class for additional CSS classes.