---
title: Nodes
description: Every Framewerk node type, one page each — purpose, example and states. The count is read from the schema, not written by hand.
status: shipped
url: https://getairframe.com/framewerk/reference/nodes
---

> Part of the Framewerk docs. Index of every page: /framewerk/llms.txt

# Nodes

## Containers

- [`screen-container`](/framewerk/reference/nodes/screen-container.md) — The screen root wrapper: it applies the screen padding, background and text colour that everything inside inherits, and scrolls by default.
- [`column`](/framewerk/reference/nodes/column.md) — A vertical flex container — the default way to stack children top to bottom.
- [`row`](/framewerk/reference/nodes/row.md) — A horizontal flex container — children sit side by side along the main axis.
- [`grid`](/framewerk/reference/nodes/grid.md) — A CSS grid container: give it a column count or template and children place themselves into cells.
- [`stack`](/framewerk/reference/nodes/stack.md) — A layering container: children render on top of each other in one shared cell, paint order child order, with zero position props.
- [`pressable`](/framewerk/reference/nodes/pressable.md) — A tappable container that renders as a column — wrap horizontal content in a row inside it.
- [`safe-area-view`](/framewerk/reference/nodes/safe-area-view.md) — Applies device insets as padding on the given edges; prefer the `safeArea` prop on an existing container over adding a wrapper.
- [`modal`](/framewerk/reference/nodes/modal.md) — A semantic marker structurally identical to a column — it carries intent for navigation and code generation rather than special rendering.
- [`bottom-sheet`](/framewerk/reference/nodes/bottom-sheet.md) — A semantic marker for a sheet presented from the bottom — structurally a column, named for navigation and code generation.
- [`alert-dialog`](/framewerk/reference/nodes/alert-dialog.md) — A semantic marker for an alert dialog — structurally a column, named for navigation and code generation.

## Text

- [`text`](/framewerk/reference/nodes/text.md) — A run of text — the leaf that carries words, with a variant for heading, body, caption or small.
- [`link`](/framewerk/reference/nodes/link.md) — Inline text that carries an action — underlined and accent-coloured by default, opinionated where `text` is not.
- [`badge`](/framewerk/reference/nodes/badge.md) — A small status word on a tinted pill — auto-coloured by common content words unless a variant overrides it.
- [`chip`](/framewerk/reference/nodes/chip.md) — A compact selectable token — filter, tag or removable choice — that fills when selected.

## Inputs

- [`button`](/framewerk/reference/nodes/button.md) — The primary affordance for an action — content, optional icon, and an `action` string of the action grammar's verbs.
- [`input`](/framewerk/reference/nodes/input.md) — A single-line text field with an optional label and placeholder — the default way to collect a short string.
- [`textarea`](/framewerk/reference/nodes/textarea.md) — A multi-line text field — an input that grows, with a row count for its initial height.
- [`select`](/framewerk/reference/nodes/select.md) — A dropdown of string options with a current value — pick one from a closed list without opening a sheet.
- [`checkbox`](/framewerk/reference/nodes/checkbox.md) — A labelled on/off control whose checked state is a string-backed boolean.
- [`switch`](/framewerk/reference/nodes/switch.md) — A labelled toggle — the binary control that reads as an immediate setting rather than a form field.
- [`slider`](/framewerk/reference/nodes/slider.md) — A labelled range control from `min` to `max` with an optional current `value`.
- [`segmented-control`](/framewerk/reference/nodes/segmented-control.md) — A horizontal set of mutually exclusive segments with one `selected` — the iOS-style alternative to a dropdown for two to four choices.
- [`radio-group`](/framewerk/reference/nodes/radio-group.md) — A labelled set of exclusive options with one `selected` — pick one when every choice must stay visible.
- [`date-picker`](/framewerk/reference/nodes/date-picker.md) — A labelled date field showing a `YYYY-MM-DD` selection — a calendar affordance without a calendar library.

## Data display

- [`icon`](/framewerk/reference/nodes/icon.md) — Any Lucide icon by its kebab-case name — the one place a spec asks for a glyph by string.
- [`image`](/framewerk/reference/nodes/image.md) — An image slot — omit `src` for a wireframe placeholder, or give `$a(<sha>.ext)` for a project asset resolved against the host's asset base.
- [`avatar`](/framewerk/reference/nodes/avatar.md) — A circular person or entity image at a standard size — sm, md or lg.
- [`shape`](/framewerk/reference/nodes/shape.md) — A parametric primitive — rectangle, circle, pill, or eight generated forms like star and ring — drawn from its own numbers, not an image.
- [`path`](/framewerk/reference/nodes/path.md) — A single-path vector that renders without `allowRawSvg`, because `d` is validated data rather than markup.
- [`data`](/framewerk/reference/nodes/data.md) — A short series drawn as sparkline, bars or gauge from a `values` array — the one data-display primitive, not a chart library.
- [`progress-bar`](/framewerk/reference/nodes/progress-bar.md) — A labelled bar from `value` over `max`, or indeterminate — progress you can show without wiring a real job.
- [`skeleton`](/framewerk/reference/nodes/skeleton.md) — A loading placeholder in the shape of text, an avatar, a card or an image — content that is coming, not content that is missing.

## Feedback & media

- [`toast`](/framewerk/reference/nodes/toast.md) — A transient message — info, success, warning or error — that appears without owning screen space permanently.
- [`carousel`](/framewerk/reference/nodes/carousel.md) — A paged horizontal strip of `count` items with an `activeIndex` — a swipe affordance drawn, not implemented.
- [`map`](/framewerk/reference/nodes/map.md) — A considered placeholder that says a map goes here — it does not fetch tiles and needs no API key.
- [`video-player`](/framewerk/reference/nodes/video-player.md) — A considered placeholder for video — duration and playing state are drawn, the file is never decoded.

## Chrome

- [`tab-bar`](/framewerk/reference/nodes/tab-bar.md) — The bottom (or top) tab bar: items with icon, label, and optional active-when expression and action.
- [`status-bar`](/framewerk/reference/nodes/status-bar.md) — Tells the renderer to draw the platform status bar as an absolutely-positioned overlay with zero height — it does not push content down.
- [`divider`](/framewerk/reference/nodes/divider.md) — A horizontal rule, optionally labelled — separation that can carry a word.
- [`spacer`](/framewerk/reference/nodes/spacer.md) — An empty flex item that takes `height` or `flex` — deliberate blank space without a magic margin.

## Structural

- [`component`](/framewerk/reference/nodes/component.md) — An instance of a named component declared under `components` — the reference, with props, to a reusable subtree.
- [`slot`](/framewerk/reference/nodes/slot.md) — A named hole inside a component that an instance projects layout content into — the mechanism behind shared chrome with different bodies.

## Vectors

- [`svg`](/framewerk/reference/nodes/svg.md) — Multi-path artwork carried as raw markup or a fetched URL — the one node that injects spec-supplied HTML, so it is opt-in behind `allowRawSvg`.

The count and the list above are read from `KNOWN_NODE_TYPES` in the schema package; a node added to the schema fails this generator until it has prose.