Actions & overlays@neumorphism-ui/popover

Popover

An anchored panel for contextual settings. Provide a PopoverTitle and description, and check keyboard dismissal.

@neumorphism-ui/popover

Registry JSON

Preview

Installation

npx shadcn@latest add @neumorphism-ui/popover

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/popover

Import

"use client";

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

Example

export default function Example() {

  return (<Popover><PopoverTrigger render={<Button />}>{"Notification settings"}</PopoverTrigger><PopoverContent><PopoverTitle>{"Tune your notifications"}</PopoverTitle><PopoverDescription>{"Keep your focus with only the updates that matter."}</PopoverDescription><PopoverClose render={<Button variant="primary" />}>{"Close"}</PopoverClose></PopoverContent></Popover>);
}

API Reference

Component	Prop	Type	Default	Description
`Popover`	`open / defaultOpen`	`boolean`	`—`	Set controlled or initial state.
`PopoverContent`	`side / align`	`Positioner.Props`	`—`	Set panel placement or spacing with viewport collision handling.
`PopoverTrigger`	`render`	`React.ReactElement \| function`	`—`	Compose an existing element, its events, and ref.