edbnedbn/ui
Get Started
WelcomeChoosing a VariantChangelogLicense
Components
OverviewButtonAlert DialogPopoverDropdown MenuPull Down MenuSheet
Motion Utilities
Motion ProviderSpring PresetsHooks
0installs
ComponentsBlocksMaps
HomeDocsComponentsStaticPopover

On this page

Popover (Static)

A lightweight floating content component with CSS transitions. Perfect for tooltips, dropdowns, and contextual information.

Overview

The static Popover uses CSS transitions for smooth enter/exit animations while avoiding the motion library dependency. Built on Radix UI Popover for robust positioning and accessibility.

Looking for spring animations? Check out the Animated Popover.

Usage

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@/components/ui/static/popover"
<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Content here</PopoverContent>
</Popover>

Installation

Install via CLI

TypeScript
npx edbn-ui add popover-static

Install dependencies

TypeScript
npm install @radix-ui/react-popover

Import and use

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

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

Examples

Basic Usage

A simple popover with text content.

With Form

Use popovers to display inline forms.

API Reference

PopoverContent

PropTypeDefaultDescription
align"start" | "center" | "end""center"Alignment relative to trigger
sideOffsetnumber4Distance from trigger in pixels
classNamestring—Additional CSS classes

Accessibility

Built on Radix UI Popover with full keyboard and screen reader support.

EscapeClose the popover
TabNavigate between focusable elements