Components

Popover

A floating panel that appears when triggered.

example.tsx

Import

tsx

import { AppPopover, AppPopoverContent, AppPopoverTrigger } from "@/components/primitives/AppPopover"

API Reference

AppPopover extends all native <div> HTML attributes.

Prop	Type	Default	Description
className	string	—	Additional Tailwind classes merged via cn(). Prefer the wrapper pattern for reusable overrides.

Source

src/components/primitives/AppPopover.tsx

"use client"

import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"

type AppPopoverProps = React.ComponentProps<typeof Popover>

function AppPopover(props: AppPopoverProps) {
  return <Popover {...props} />
}

function AppPopoverTrigger(props: React.ComponentProps<typeof PopoverTrigger>) {
  return <PopoverTrigger {...props} />
}

function AppPopoverContent(props: React.ComponentPropsWithoutRef<typeof PopoverContent>) {
  return <PopoverContent {...props} />
}

export { AppPopover, AppPopoverTrigger, AppPopoverContent }