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

import Popover from "@/components/ui/popover/Popover.astro";
import PopoverTrigger from "@/components/ui/popover/PopoverTrigger.astro";
import PopoverContent from "@/components/ui/popover/PopoverContent.astro";

Usage

import {
Popover,
PopoverTrigger,
PopoverContent,
} from "@/components/ui/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.