Popover

Installation

›pnpm dlx shadcn@latest add @evolphin/popover

Usage

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>

Type Definitions

interface PopoverProps {
  /** The controlled open state of the popover */
  open?: boolean;  
PopoverProps.open?: boolean | undefined
The controlled open state of the popover
  /** The default open state when uncontrolled */
  ?: boolean;
  /** Event handler called when the open state changes */
  ?: (: boolean) => void;
  /** The modality of the popover */
  ?: boolean;
}

Examples

Default

API Reference

Prop	Type	Default	Description
`open`	`boolean`	-	The controlled open state of the popover.
`defaultOpen`	`boolean`	-	The default open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes.
`modal`	`boolean`	`false`	The modality of the popover.

PopoverTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.

PopoverContent

Prop	Type	Default	Description
`align`	`"start" \	"center" \	"end"`
`sideOffset`	`number`	`4`	The distance in pixels from the trigger.
`className`	`string`	-	Additional CSS classes

PopoverAnchor

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.

Search

On this page