Chewypixel component

Popover

A frosted panel that scales in from its trigger and animates out before it closes.

Installation

npx shadcn@latest add @chewypixel/popover

Usage

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

export function GiftNote() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Add a gift note</Button>
      </PopoverTrigger>
      <PopoverContent>We'll tuck it in the box, handwritten.</PopoverContent>
    </Popover>
  );
}

Props

open

Whether it's open, when controlled. Goes on Popover.

boolean

onOpenChange

Called when it opens or closes. Goes on Popover.

(open: boolean) => void

align

How it lines up with the trigger. Goes on PopoverContent.

"start" | "center" | "end" = "center"

sideOffset

The gap between the trigger and the panel, in pixels. Goes on PopoverContent.

number = 4

Released under the MIT License.

More components

See them in a real app

These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.

Live preview Explore Mochi