shadcn/popover.tsx

saasyland.com · src/presentation/components/shadcn/popover.tsx · typescript · MIT
ui, UI / Frontend

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