UI floating over a full-bleed background: a map, a 3D scene, a video or a photo. Four slots sit along the edges (top, start, end, bottom) and everything in them is glass by default, translucent and blurred over what is behind.
The background stays interactive wherever no slot sits on it: drag the map, click a pin.
controls (zoom, compass, locate) and attribution (the map's source notes) sit in the free corner above the bottom bar, clear of the panels and the dock.
startWidth and endWidth size the side columns (320px and 340px by default).
The layout publishes --floating-safe-top, -start, -end and -bottom (px): how far its slots reach in. Use them to keep a map library's own controls clear, e.g. .maplibregl-ctrl-bottom-right { right: var(--floating-safe-end); bottom: var(--floating-safe-bottom) }.
Below 720px of width the slots stack (top, start, the background, bottom) and the layout grows with them; the end slot becomes a bottom sheet over the background whose handle expands and collapses it (endSheet={false} stacks it instead).
surface="solid" turns the glass off; surface="solid" on a single Panel or Card opts just that one out.
Panels, cards, the dock, map legends and controls, and loose controls (search field, chips, icon buttons, segmented controls) turn into glass inside it; menus, popovers and dialogs take the stronger glass fill.
Text on glass keeps 4.5:1 over any backdrop. Reduced transparency, more contrast and forced colours fall back to solid surfaces.
What the UI floats over, filling the layout: a map, a 3D canvas, a video, a photo.
top?
ReactNode
Bar along the top edge (search, filters, title).
start?
ReactNode
Column on the start side (layers, lists, settings).
end?
ReactNode
Column on the end side (details of the selected thing).
bottom?
ReactNode
Bar along the bottom edge (dock, playback, a summary).
controls?
ReactNode
Controls of the background (zoom, compass, locate) in the free corner above the bottom bar.
attribution?
ReactNode
Source notes of the background (map attribution), under `controls`, clear of every slot.
startWidth?
number | string
Width of the start column (default 320px) and of the end column (default 340px).
endWidth?
number | string
endSheet?
boolean
Below 720px of width the end slot becomes a bottom sheet over the background, with a handle
that expands and collapses it (default true). `false` stacks it with the others.
height?
number | string
Height of the layout (default 640). Below 720px of width the slots stack: top, start, end,
bottom. The layout sets `--floating-safe-top/-start/-end/-bottom` (px) to the space its
slots take, so map libraries can keep their own controls clear of them.
surface?
Surface
Glass for every surface in the slots (default) or solid surfaces.
label?
string
Accessible name of the region.
children?
ReactNode
className?
string
Extra class on the root element.
style?
CSSProperties
Inline style on the root element.
IconButton
Prop
Type
Notes
icon
IconName
Required
label
string
Accessible name and tooltip (`aria-label` and `title`); `aria-label` or `title` override them.
variant?
"soft" | "solid" | "outline" | "ghost"
size?
"sm" | "md" | "lg"
type?
"button" | "submit" | "reset"
onClick?
(e: MouseEvent<HTMLButtonElement>) => void
disabled?
boolean
asChild?
boolean
Render the single child element (a link) with the button's look; the icon is placed inside it.
children?
ReactNode
id?
string
name?
string
Form field name and value, sent with the form when this button submits it.
value?
string
form?
string
The id of the form this button belongs to, when it sits outside it.
title?
string
tabIndex?
number
autoFocus?
boolean
aria-label?
string
aria-labelledby?
string
aria-describedby?
string
aria-expanded?
boolean | "true" | "false"
For disclosure and menu triggers: whether what the button controls is open.