Popover

Ready

Floating content panels triggered by user interaction

Basic Popover

Simple popover with text content

Form in Popover

Popover containing a form

Positioning

Popover can be positioned on different sides

Installation

npm install @radix-ui/react-popover

Usage

import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Button } from '@/components/ui/button'

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Open</Button>
      </PopoverTrigger>
      <PopoverContent>
        <p>Popover content here</p>
      </PopoverContent>
    </Popover>
  )
}

Features

  • Flexible positioning - Top, right, bottom, left placement
  • Smooth animations - Fade and zoom entrance/exit
  • Click outside to close - Automatic dismissal
  • 8px border radius - Consistent with Eidetic design