# Elements
Every element is written `kind [positional] { props; children }`. Each page lists an element's own props and events; the props every node takes are on [`node`](/reference/elements/node.html.md). These pages are generated from the schema `strand check` checks against.
## Prop groups
## Elements
arcAn arc or ring gauge: arc { value: cpu.usage; sweep: 270deg; stroke: 4, $accent }.
barA bar, on every monitor with screen in scope.
boxA plain box to style.
buttonA button with a label: button "‹" { on click { … } }.
canvasDraws with code: canvas { draw: (c) => … }.
centerThe centre part of a split, truly centred.
colLays out its children in a column.
effectA built-in effect: effect sparks { … }.
endThe end part of a split.
fileKeeps a file in step with the theme: file "~/.cache/strand/colors.css" { template: "colors.css.tmpl"; run: ["reload-colors"] }.
graphA sparkline with its own history: graph cpu.usage { history: 60s }.
gridLays out its children in a grid.
iconAn icon by name: icon "wifi" looks in the config's icons/ folder (wifi.svg or .png, then wifi-symbolic), then the icon theme.
imageA picture by file path (image "art.png", relative to the config directory) or by icon name, as icon finds it.
inputA text field: input { text: <-> query }.
lettersAnimates each letter of the text it is written in: text "hi" { letters { y: 2 * wave(1s, phase: index * 0.1) } }.
listVirtualised; arrow keys move the selection.
lockThe lock screen, on ext-session-lock: on every monitor its screens: picks (every one by default), one instance a monitor sharing the lock's states, timers and on change handlers.
lottieA Lottie animation: lottie "loader.json" { speed: 1 }.
mergeGoo merge: children melt together within the given distance.
meterA bar filled to its value: meter level, meter memory.used { range: 0, memory.total }.
osdAn on-screen display: on the focused monitor, in the overlay layer and click-through; with screens: all (or names) on each of those, with screen in scope.
pageA page of pages, shown when its value is current.
pagesShows one page at a time, with directional transitions.
panelA layer-shell panel: launchers, notification stacks, dashboards.
particlesParticles: particles { rate: 20; life: 1.2s; sprite: dot(3) }.
popupAnchored to its parent element; nests (tray menus).
rowLays out its children in a row.
scrollScrolls its content.
segmentedOne choice of several: segmented { options: Look; value: <-> theme.look }.
shaderYour own WGSL shader: shader "aurora.wgsl" { u_speed: 0.4 }.
sliderA slider: slider { value: <-> audio.sink.volume }.
spacerTakes up the space left.
spectrumAn audio spectrum: spectrum audio.sink { bars: 48; style: mirror }.
splitStart, centre and end, with a truly centred middle.
stackStacks its children on top of each other.
startThe start part of a split.
svgAn SVG whose layers bind by id: svg "icon.svg" { #needle { … } }.
textText: text clock.format("%a %d %H:%M").
thumbnailA live thumbnail of a window (thumbnail w), or a still of a screen, taken each time it is shown (thumbnail screen).
tooltipA tooltip with content of its own.
windowA window the compositor manages (xdg_toplevel): it tiles, floats, moves, minimises and shows in task bars as an app's window does (a settings window, a picker).