Popover
A small panel anchored to a trigger.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Popover
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/popover.json'Usage
A complete example using the installed component and hook paths.
Popover usage
"use client";import { Button } from "@/components/ui/button";import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/ui/popover";function PopoverPreview() { return ( <Popover> <PopoverTrigger render={<Button variant="outline" />}>Show details</PopoverTrigger> <PopoverContent> <PopoverHeader> <PopoverTitle>Example details</PopoverTitle> <PopoverDescription>This panel is anchored to its button.</PopoverDescription> </PopoverHeader> </PopoverContent> </Popover> );}export default function Demo() { return <PopoverPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Popover
Popover props
PopoverPrimitive.Root.PropsPopoverContent
PopoverContent props
PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">- align
- "center"
- alignOffset
- 0
- side
- "bottom"
- sideOffset
- 4
PopoverDescription
PopoverDescription props
PopoverPrimitive.Description.PropsPopoverHeader
PopoverHeader props
React.ComponentProps<"div">PopoverTitle
PopoverTitle props
PopoverPrimitive.Title.PropsPopoverTrigger
PopoverTrigger props
PopoverPrimitive.Trigger.Props & { sound?: boolean }- sound
- true