Glass Panel
Frosted-glass surface for floating chrome above a canvas — dock panels, hovering toolbars, and transient overlays — with a translucent background and soft border.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/glass-panel.jsonStorybook
Explore all variants, controls, and accessibility checks in the interactive Storybook playground.
View in StorybookCode
import { forwardRef } from "react";
import { cn } from "../../lib/utils";
export type GlassPanelProps = React.ComponentPropsWithoutRef<"div">;
const GlassPanel = forwardRef<HTMLDivElement, GlassPanelProps>(
({ children, className, ...props }, ref) => (
<div
className={cn(
"rounded-2xl border border-border/60 bg-background/70 shadow-[0_12px_40px_oklch(var(--foreground)/0.08)] backdrop-blur-xl",
className,
)}
ref={ref}
{...props}
>
{children}
</div>
),
);
GlassPanel.displayName = "GlassPanel";
export { GlassPanel };