Floating UI
Stacked floating layer composition with configurable offset and shadow depth.
Preview
Import
import { FloatingUI } from "@sigil-ui/components";Usage
<FloatingUI layers={[<div key="content" className="p-6 bg-[var(--s-surface)]">Content layer</div>, <div key="controls" className="p-6 bg-[var(--s-surface-raised)]">Controls layer</div>]} />Custom offset
<FloatingUI
offset={30}
layers={[
<div className="p-6">Top layer</div>,
<div className="p-6">Middle layer</div>,
<div className="p-6">Bottom layer</div>,
]}
/>Shadow depth
<FloatingUI shadowDepth="sm" layers={[<div className="p-4">Subtle</div>, <div className="p-4">Shadow</div>]} />
<FloatingUI shadowDepth="lg" layers={[<div className="p-4">Heavy</div>, <div className="p-4">Shadow</div>]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
layers | ReactNode[] | — | Array of elements stacked as floating layers |
offset | number | 20 | Pixel offset between each layer |
shadowDepth | "sm" | "md" | "lg" | "md" | Shadow intensity per layer |
className | string | — | Additional CSS classes |