V-/Srcv0.1.0beta

// popover

Popover

Anchored glass panel for small forms and detail.

// install
npx shadcn add @vsrc/popover

Props

Only the vsrc surface is documented here. Everything else passes through to Radix Popover.

// PopoverContent

proptypedefaultnotes
glass"subtle" | "regular" | "heavy" | LiquidGlassOptions | false—Optics override for the panel. A preset name replaces the tuned values, an object merges over them, `false` disables refraction entirely.

Optics

Forwards `glass` to GlassSurface — engine defaults. Panel-sized, statically positioned once open: the ideal refraction case.

Accessibility

  • Radix focus management: focus moves into the panel on open, returns to the trigger on close, escape dismisses.

Source

The exact file the CLI copies into your project — you own it after install.

// registry/vsrc/ui/popover.tsx
"use client";

import * as React from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import type { GlassPreset, LiquidGlassOptions } from "vsrc/react";

import { GlassSurface } from "@/registry/vsrc/ui/glass-surface";
import { cn } from "@/lib/utils";

const Popover = PopoverPrimitive.Root;
const PopoverTrigger = PopoverPrimitive.Trigger;
const PopoverAnchor = PopoverPrimitive.Anchor;

function PopoverContent({
  className,
  align = "center",
  sideOffset = 8,
  glass,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content> & { glass?: LiquidGlassOptions | GlassPreset | false }) {
  return (
    <PopoverPrimitive.Portal>
      <GlassSurface asChild glass={glass}>
        <PopoverPrimitive.Content
          data-slot="popover-content"
          align={align}
          sideOffset={sideOffset}
          className={cn("animate-glass-in relative z-50 w-72 p-4 text-foreground outline-none", className)}
          {...props}
        />
      </GlassSurface>
    </PopoverPrimitive.Portal>
  );
}

export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };