@corvu-next/popover

Popover/dropdown component for SolidJS 2.0 with floating positioning, focus trap, and animation support.

Note: This is the Solid 2.0 fork of corvu. It targets [email protected].

Features

• Floating UI-based positioning with automatic placement
• Focus trap keeps keyboard navigation within the popover
• Dismissible via Escape key and outside click
• CSS animation/transition support for open/close
• Arrow element with automatic positioning
• Anchor element support for custom reference positioning
• Portal rendering
• Controlled and uncontrolled state

Installation

npm install @corvu-next/popover
# or
pnpm add @corvu-next/popover

Usage

import Popover from '@corvu-next/popover'

function MyPopover() {
  return (
    <Popover.Root>
      <Popover.Trigger>Open Menu</Popover.Trigger>
      <Popover.Portal>
        <Popover.Content>
          <Popover.Arrow />
          <p>Popover content goes here.</p>
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  )
}

API

| Component | Description | |-----------|-------------| | Popover.Root | Container. Props: open/onOpenChange for controlled mode, placement, strategy. | | Popover.Trigger | Button that toggles the popover. | | Popover.Portal | Renders children into a portal. | | Popover.Anchor | Custom anchor element for positioning (alternative to Trigger). | | Popover.Arrow | Arrow element pointing toward the anchor/trigger. | | Popover.Content | Popover content panel. Manages focus trap, dismissal, and floating position. |

Further Reading

This package is part of corvu-next, a collection of unstyled, accessible and customizable UI primitives for SolidJS 2.0.