Popover

Floating content panel with dot notation and click-outside to close.

Preview

Popover Title

This is the popover content. Click outside to close.

Installation

npx drivn add popover

Usage

1 import { Popover } from "@/components/ui/popover"
2 
3 export default function Page() {
4   return (
5     <Popover>
6       <Popover.Trigger>Open Popover</Popover.Trigger>
7       <Popover.Content>
8         <p className="font-semibold">Popover Title</p>
9         <p>This is the popover content.</p>
10       </Popover.Content>
11     </Popover>
12   )
13 }

API Reference

Popover

Prop	Type	Default	Description
`position`	"top" \| "bottom" \| "left" \| "right"	"bottom"	Position of the popover relative to the trigger
`className`	string	—	Additional CSS classes to apply
`children`	ReactNode	—	Popover sub-components (Trigger, Content)

Popover.Content

Prop	Type	Default	Description
`className`	string	—	Additional CSS classes for the content panel
`children`	ReactNode	—	Content displayed inside the popover

1	import { Popover } from "@/components/ui/popover"
2
3	export default function Page() {
4	return (
5	<Popover>
6	<Popover.Trigger>Open Popover</Popover.Trigger>
7	<Popover.Content>
8	<p className="font-semibold">Popover Title</p>
9	<p>This is the popover content.</p>
10	</Popover.Content>
11	</Popover>
12	)
13	}