Popover

Raised bubble that grows out of its trigger for small forms and details.

Installation

npx shadcn@latest add https://ui-collections.vercel.app/r/glass/popover.json

Also installs the theme, cn(). Packages: clsx, tailwind-merge, radix-ui.

Usage

popover-demo.tsx

"use client";

import { Button } from "@/registry/kit/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/registry/kit/ui/popover";
import { Slider } from "@/registry/kit/ui/slider";

export default function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Resources</Button>
      </PopoverTrigger>
      <PopoverContent>
        <div className="font-medium">Function resources</div>
        <p className="mt-1 text-muted">Applies to every serverless function.</p>
        <div className="mt-5 grid gap-5">
          <label className="grid gap-3">
            <span className="flex justify-between text-xs text-muted">
              Memory <span className="text-fg">1024 MB</span>
            </span>
            <Slider defaultValue={[40]} aria-label="Memory" />
          </label>
          <label className="grid gap-3">
            <span className="flex justify-between text-xs text-muted">
              Timeout <span className="text-fg">30 s</span>
            </span>
            <Slider defaultValue={[25]} aria-label="Timeout" />
          </label>
        </div>
      </PopoverContent>
    </Popover>
  );
}

API

<PopoverContent align>

= "center"

"start" | "center" | "end"

Alignment against the trigger.

<PopoverContent sideOffset>

= 10

number

Gap from the trigger in px.

Source

components/ui/popover.tsx

"use client";

import { Popover as PopoverPrimitive } from "radix-ui";
import type { ComponentProps } from "react";

import { cn } from "@/registry/kit/lib/utils";

export const Popover = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;
export const PopoverAnchor = PopoverPrimitive.Anchor;
export const PopoverClose = PopoverPrimitive.Close;

/** Raised bubble that grows from its trigger. */
export function PopoverContent({
  className,
  align = "center",
  sideOffset = 10,
  ...props
}: ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "surface-raised z-50 w-72 rounded-card p-5 text-sm text-fg outline-none",
          "origin-(--radix-popover-content-transform-origin) transition-[opacity,scale] duration-200 ease-theme starting:scale-95 starting:opacity-0 data-[state=closed]:animate-pop-out",
          className,
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  );
}

Usage

popover-demo.tsx

"use client";

import { Button } from "@/registry/kit/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/registry/kit/ui/popover";
import { Slider } from "@/registry/kit/ui/slider";

export default function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Resources</Button>
      </PopoverTrigger>
      <PopoverContent>
        <div className="font-medium">Function resources</div>
        <p className="mt-1 text-muted">Applies to every serverless function.</p>
        <div className="mt-5 grid gap-5">
          <label className="grid gap-3">
            <span className="flex justify-between text-xs text-muted">
              Memory <span className="text-fg">1024 MB</span>
            </span>
            <Slider defaultValue={[40]} aria-label="Memory" />
          </label>
          <label className="grid gap-3">
            <span className="flex justify-between text-xs text-muted">
              Timeout <span className="text-fg">30 s</span>
            </span>
            <Slider defaultValue={[25]} aria-label="Timeout" />
          </label>
        </div>
      </PopoverContent>
    </Popover>
  );
}

Source

components/ui/popover.tsx

"use client";

import { Popover as PopoverPrimitive } from "radix-ui";
import type { ComponentProps } from "react";

import { cn } from "@/registry/kit/lib/utils";

export const Popover = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;
export const PopoverAnchor = PopoverPrimitive.Anchor;
export const PopoverClose = PopoverPrimitive.Close;

/** Raised bubble that grows from its trigger. */
export function PopoverContent({
  className,
  align = "center",
  sideOffset = 10,
  ...props
}: ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "surface-raised z-50 w-72 rounded-card p-5 text-sm text-fg outline-none",
          "origin-(--radix-popover-content-transform-origin) transition-[opacity,scale] duration-200 ease-theme starting:scale-95 starting:opacity-0 data-[state=closed]:animate-pop-out",
          className,
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  );
}