saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Popover

Popover

Displays rich content in a portal, triggered by a button.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/popover.json

Usage

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>
    Place content here.
  </PopoverContent>
</Popover>

API Reference

Popover

The root component that manages popover state.

PropTypeDefaultDescription
openboolean—Controlled open state.
onOpenChange(open: boolean) => void—Callback when open state changes.
defaultOpenbooleanfalseThe default open state for uncontrolled usage.

PopoverTrigger

The element that toggles the popover.

PopoverContent

The floating content panel.

PropTypeDefaultDescription
align"start" | "center" | "end""center"Alignment of the popover relative to the trigger.
sideOffsetnumber4Distance in pixels from the trigger.
side"top" | "right" | "bottom" | "left""bottom"The side the popover appears on.
PreviousParallaxNextProgress

On This Page

  • Installation
  • Usage
  • API Reference
  • Popover
  • PopoverTrigger
  • PopoverContent