StacklyUI
Components/Popover

Popover

Rich floating content anchored to a trigger.

01

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsx
render(
  <Popover>
    <PopoverTrigger asChild><Button variant="outline">Open popover</Button></PopoverTrigger>
    <PopoverContent>
      <p className="font-semibold text-fg">Dimensions</p>
      <p className="mt-1 text-sm text-muted">Set the width and height for the layer.</p>
      <div className="mt-3 space-y-2">
        <div className="flex items-center gap-2"><Label className="w-16">Width</Label><Input defaultValue="100%" className="h-8" /></div>
        <div className="flex items-center gap-2"><Label className="w-16">Height</Label><Input defaultValue="24px" className="h-8" /></div>
      </div>
    </PopoverContent>
  </Popover>
)
02

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/popover

Or install the package and import it:

$pnpm add @stacklyui/ui motion
03

Usage

Import Popover from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.