Neumorphism UI

Popover

Use Popover for a small interactive panel tied to a nearby trigger, such as quick preferences.

Preview

Notification preferences panel

Open a titled panel with a brief explanation and an explicit close button.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/popover

Install the shared base once, then add components and their dependencies with the CLI.

Notification preferences panel

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

Usage

Pair PopoverTrigger with PopoverContent and provide a title or accessible name. Put short controls or explanations in the panel and add PopoverClose when an explicit close action helps.

"use client";

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

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger render={<Button />}>Project details</PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Team workspace</PopoverTitle>
        <PopoverDescription>Eight members are collaborating.</PopoverDescription>
        <PopoverClose render={<Button />}>Close</PopoverClose>
      </PopoverContent>
    </Popover>
  );
}

API Reference

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

ComponentPropTypeDefaultDescription
Popoveropen / defaultOpenboolean—Set controlled or initial state.
PopoverContentside / alignPositioner.Props—Set panel placement or spacing with viewport collision handling.
PopoverTriggerrenderReact.ReactElement | function—Compose an existing element, its events, and ref.

Accessibility

  • 01

    Provide a PopoverTitle and description, and check keyboard dismissal.

  • 02

    Preserve labels and visible focus when customizing render or className.