Popover

free

Popover floats details, quick forms, and secondary controls next to a trigger.

import Button from '@/components/ui/button';
import Popover from '@/components/ui/popover';

export default function UsageDemo() {

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Popover

pnpm dlx nateui@latest add Popover

yarn dlx nateui@latest add Popover

Examples

Basic

import { PiArrowUpRight, PiSquaresFour } from 'react-icons/pi'
import Popover from '@/components/ui/popover';

export default function BasicDemo() {

Trigger

import { PiArrowUpRight, PiSquaresFour } from 'react-icons/pi'
import Popover from '@/components/ui/popover';

const content = (

Custom Trigger

import { PiSealCheck } from 'react-icons/pi'
import Avatar from '@/components/ui/avatar';
import Button from '@/components/ui/button';
import Tag from '@/components/ui/tag';

Placement

import { PiArrowUpRight, PiSquaresFour } from 'react-icons/pi'
import Popover from '@/components/ui/popover';

const content = (

Controlled

import { useState } from 'react';
import Calendar from '@/components/ui/calendar';
import Popover from '@/components/ui/popover';

API

Popover renders a title (or a renderTrigger element) as the trigger and floats its children in a portalled panel. Open state is uncontrolled by default, or controlled with open and onOpenChange.

Prop	Description	Type	Default
`title`	Label for the default trigger. Rendered inside the built-in button when `renderTrigger` is not set.	`string \| ReactNode`	-
`renderTrigger`	Custom element used as the trigger, replacing the default button.	`ReactNode`	-
`children`	Content rendered inside the floating panel.	`ReactNode`	-
`trigger`	How the panel opens.	`'click' \| 'hover'`	`'click'`
`placement`	Side and alignment the panel opens from, relative to the trigger.	`Placement`	`'bottom'`
`open`	Controls the open state. Pair with `onOpenChange`.	`boolean`	-
`onOpenChange`	Called when the open state should change.	`(open: boolean) => void`	-
`width`	Width of the panel body.	`number \| string`	-
`modal`	Traps focus within the panel while open.	`boolean`	`false`
`className`	Class names applied to the panel body.	`string`	-
`...nativeProps`	Native div props applied to the floating panel.	`Omit<ComponentProps<'div'>, 'title'>`	-

Types

type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'right'
  | 'right-start'
  | 'right-end'
  | 'left'
  | 'left-start'
  | 'left-end';