A customizable popover component built with React Aria that provides accessible floating content containers for displaying contextual information.
// Source: https://github.com/saasyland/saasyland.com | License: MIT | Copyright 2023, 2026 Piotr Borowiecki
// Provided via justclaw.it.com; keep this notice with the code.
import type { ComponentProps } from "react"
import {
DialogTrigger,
type DialogTriggerProps,
Heading,
Popover as PopoverPrimitive,
type PopoverProps as PopoverPrimitiveProps,
} from "react-aria-components"
import { cn } from "~/src/lib/cn"
const POPOVER_OFFSET = 4
const POPOVER_CROSS_OFFSET = 0
const PopoverTrigger = ({ children, ...props }: Readonly<DialogTriggerProps>) => (
<DialogTrigger data-slot="popover-trigger" {...props}>
{children}
</DialogTrigger>
)
const Popover = ({
className,
crossOffset = POPOVER_CROSS_OFFSET,
offset = POPOVER_OFFSET,
placement = "bottom",
...props
}: Omit
... (truncated -- full source via MCP)
See the full source, get the GitHub permalink, and search for more like it.
Get a free API key