Popover

A sketchy-bordered floating panel anchored to a trigger, built on Radix Popover. The panel border draws in on open, same recipe as the Select menu.

Roughness1.5Lock seedAnimate

<Popover roughness={1.5}>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent>A sketchy floating panel.</PopoverContent>
</Popover>

CLI install

npx doodleui-react add popover

Usage

import { Popover, PopoverTrigger, PopoverContent, Button } from "doodleui-react";

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    A sketchy floating panel anchored to its trigger.
  </PopoverContent>
</Popover>

Props

Prop	Type	Default	Notes
open / onOpenChange	boolean / (open: boolean) => void	uncontrolled	Radix controlled API.
animate	boolean	true	Draw-in the panel border when the popover opens. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.