Primitives

Popover

Anchored floating panel for inline settings and contextual content.

Composition

The preferred shape for composing the installed primitive from its exported parts.

Parts

Exported compound parts from the installed source.

Popover

├── PopoverTrigger

├── PopoverAnchor

├── PopoverContent

├── PopoverHeader

├── PopoverTitle

├── PopoverDescription

└── PopoverClose

The refined source installs this primitive from src/registry/sources/refined/ui/popover.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/popover.json

See registry manifest

Installed dependencies

Installed with this primitive because the slot depends on them; they are support files, not standalone sidebar items.

Surface variantssrc/registry/sources/refined/surface-variants.tsSupport

Raw code

Primary installed primitive source

Base UI Popover slot

src/registry/sources/refined/ui/popover.tsx

"use client";

import { Popover as PopoverPrimitive } from "@base-ui/react/popover";

import type { ComponentProps } from "react";

import { cn } from "@/components/refined-ui/lib/cn";

import { skinEffects, skinId, skinSlot } from "@/components/refined-ui/skin";

import { floatingContentClasses } from "@/components/refined-ui/surface-variants";

// Refined skin slot, 100% Base UI: anchored floating panel on popover token set (--radius-popover, --popover-padding, shadow-pop), shared w/ menu/select/context-menu; re-asserts skin scope on portal.

// shadcn-shaped facade (Root/Trigger/Content) so shadcn Popover snippets compose verbatim, plus optional Header/Title/Description/Close.

export function Popover(props: ComponentProps<typeof PopoverPrimitive.Root>) {

return <PopoverPrimitive.Root {...props} />;

}

export function PopoverTrigger({ className, ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>) {

return (

<PopoverPrimitive.Trigger

data-ui="agent"

data-slot="popover-trigger"

className={cn(skinSlot("popover-trigger", {}), className)}

{...props}

/>

);

}

export function PopoverAnchor(props: ComponentProps<typeof PopoverPrimitive.Trigger>) {

// Base UI anchors popover to trigger; render trigger as child to anchor elsewhere.

return <PopoverPrimitive.Trigger {...props} />;

}

export function PopoverContent({

className,

children,

side = "bottom",

align = "center",

sideOffset = 6,

...props

}: ComponentProps<typeof PopoverPrimitive.Popup> & {

side?: ComponentProps<typeof PopoverPrimitive.Positioner>["side"];

align?: ComponentProps<typeof PopoverPrimitive.Positioner>["align"];

sideOffset?: number;

}) {

return (

<PopoverPrimitive.Portal>

{/* Portal escapes token-scoped ancestor — positioner re-asserts ACTIVE skin's scope (theme.css mirrors). */}

<PopoverPrimitive.Positioner

data-skin={skinId()}

data-effects={skinEffects()}

side={side}

align={align}

sideOffset={sideOffset}

className="z-[80] outline-none"

>

<PopoverPrimitive.Popup

data-ui="agent"

data-slot="popover-content"

className={cn("w-72 p-4", floatingContentClasses, skinSlot("popover-content", {}), className)}

{...props}

>

{children}

</PopoverPrimitive.Popup>

</PopoverPrimitive.Positioner>

</PopoverPrimitive.Portal>

);

}

export function PopoverHeader({ className, ...props }: ComponentProps<"div">) {

return (

<div

data-ui="agent"

data-slot="popover-header"

className={cn("grid gap-1.5 pb-3", skinSlot("popover-header", {}), className)}

{...props}

/>

);

}

export function PopoverTitle({ className, ...props }: ComponentProps<typeof PopoverPrimitive.Title>) {

return (

<PopoverPrimitive.Title

data-ui="agent"

data-slot="popover-title"

className={cn("text-sm font-semibold leading-none tracking-tight", skinSlot("popover-title", {}), className)}

{...props}

/>

);

}

export function PopoverDescription({ className, ...props }: ComponentProps<typeof PopoverPrimitive.Description>) {

return (

<PopoverPrimitive.Description

data-ui="agent"

data-slot="popover-description"

className={cn("text-sm text-muted-foreground", skinSlot("popover-description", {}), className)}

{...props}

/>

);

}

export function PopoverClose({ className, ...props }: ComponentProps<typeof PopoverPrimitive.Close>) {

return (

    <PopoverPrimitive.Close data-ui="agent" data-slot="popover-close" className={cn(skinSlot("popover-close", {}), className)} {...props} />

);

}

Refined UI

Popover

Composition

Parts

Installed dependencies

Raw code