Floating UI
Arrange interface panels in a layered visual composition.
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>]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
layers | ReactNode[] | — | Array of React elements to stack as floating layers. |
offset | number | 20 | Pixel offset between each layer. |
shadowDepth | "sm" | "md" | "lg" | md | Shadow depth applied to each layer. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-shadow-sm | Shadow sm |
--s-shadow-md | Shadow md |
--s-shadow-lg | Shadow lg |
--s-card-radius | Card radius |
--s-border | Border |
--s-surface | Surface |