Frosted Panel
Place content on a translucent, blurred surface.
Preview
Import
import { FrostedPanel } from "@sigil-ui/components";Usage
<div className="relative w-full overflow-hidden border border-[var(--s-border)] bg-[var(--s-primary-muted)] p-[var(--s-space-8)]">
<FrostedPanel edge="left" className="p-[var(--s-space-6)]">
<p className="font-medium text-[var(--s-text)]">Context panel</p>
<p className="mt-2 text-sm text-[var(--s-text-muted)]">The backdrop remains visible while content stays readable.</p>
</FrostedPanel>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
edge | FrostedPanelEdge | left | Which edge gets a border. |
variant | "frosted" | "solid" | frosted | Use frosted glass (blur) or solid bg. |
as | "div" | "aside" | "nav" | "header" | div | Element type. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-background | Background |