Popover

Displays rich content in a portal, triggered by a button.

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

export function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="secondary" />}>
        Dimensions
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>
            Set the dimensions for the layer.
          </PopoverDescription>
        </PopoverHeader>
        <div className="grid grid-cols-[4rem_1fr] items-center gap-x-3 gap-y-2">
          <Label htmlFor="popover-width">Width</Label>
          <Input id="popover-width" defaultValue="100%" />
          <Label htmlFor="popover-height">Height</Label>
          <Input id="popover-height" defaultValue="25px" />
        </div>
      </PopoverContent>
    </Popover>
  )
}

Installation


pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/popover.json

Usage

import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
    Open Popover
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Title</PopoverTitle>
      <PopoverDescription>Description text here.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

Examples

Sides

import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

export function PopoverSides() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      {(["top", "right", "bottom", "left"] as const).map((side) => (
        <Popover key={side}>
          <PopoverTrigger
            render={<Button variant="outline" className="capitalize" />}
          >
            {side}
          </PopoverTrigger>
          <PopoverContent side={side} className="w-auto">
            Opens on the {side}.
          </PopoverContent>
        </Popover>
      ))}
    </div>
  )
}

Align

import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

export function PopoverAlign() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      {(["start", "center", "end"] as const).map((align) => (
        <Popover key={align}>
          <PopoverTrigger
            render={<Button variant="outline" className="capitalize" />}
          >
            {align}
          </PopoverTrigger>
          <PopoverContent align={align} className="w-48">
            Aligned to the {align}.
          </PopoverContent>
        </Popover>
      ))}
    </div>
  )
}

Disabled

import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

export function PopoverDisabled() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="secondary" />} disabled>
        Dimensions
      </PopoverTrigger>
      <PopoverContent>Never opens.</PopoverContent>
    </Popover>
  )
}