Skip to content
aq-ui
Back to ComponentsComponent

Popover

Open-code aq-ui accessible component family for Popover.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add popover

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { Popover } from "@/components/ui/popover"

<Popover />

Popover

functionSource L8

Open-code aq-ui accessible component family for Popover.

function Popover({ ...props }: PopoverPrimitive.Root.Props)
Props type
PopoverPrimitive.Root.Props
<Popover />

PopoverContent

constSource L26

Content export for composing Popover.

const PopoverContent = React.forwardRef<React.ComponentRef<typeof PopoverPrimitive.Popup>, PopoverPrimitive.Popup.Props & Pick< PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" >>(…)
Props type
PopoverPrimitive.Popup.Props & Pick< PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" >
<PopoverContent />

PopoverDescription

constSource L98

Description export for composing Popover.

const PopoverDescription = React.forwardRef<React.ComponentRef<typeof PopoverPrimitive.Description>, PopoverPrimitive.Description.Props>(…)
Props type
PopoverPrimitive.Description.Props
<PopoverDescription />

PopoverHeader

constSource L68

Header export for composing Popover.

const PopoverHeader = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<PopoverHeader />

PopoverTitle

constSource L83

Title export for composing Popover.

const PopoverTitle = React.forwardRef<React.ComponentRef<typeof PopoverPrimitive.Title>, PopoverPrimitive.Title.Props>(…)
Props type
PopoverPrimitive.Title.Props
<PopoverTitle />

PopoverTrigger

constSource L12

Trigger export for composing Popover.

const PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverPrimitive.Trigger.Props>(…)
Props type
PopoverPrimitive.Trigger.Props
<PopoverTrigger />

Registry dependencies

utils

Package dependencies

@base-ui/react@^1.7.0

Files

  • components/ui/popover.tsx

Source