> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unoverse.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Primitives
The complete set a definition may compose from. It is closed: a renderer meeting an unknown
type would have nothing to draw, so adding to it is a change to every SDK.
Generated from definition-1.2.schema.json and the token files, so it
cannot fall behind what ships.
## Structure
A container. The one you reach for by default, and the thing every layout is built from.
```yaml theme={"dark"}
type: Box
style: { direction: column, gap: "3", padding: "6" }
children:
- { type: Text, value: Hello }
```
Children in one direction, spaced evenly. A `Box` that has already decided it is a stack.
```yaml theme={"dark"}
type: Stack
style: { direction: column, gap: "2" }
children:
- { type: Text, value: First }
- { type: Text, value: Second }
```
Children left to right. Stacks automatically once the space runs out.
```yaml theme={"dark"}
type: Row
style: { gap: "3", align: center }
children:
- { type: Icon, icon: check }
- { type: Text, value: Confirmed }
```
Children top to bottom.
```yaml theme={"dark"}
type: Column
style: { gap: "2" }
children:
- { type: Text, value: Total }
- { type: Text, value: "$49" }
```
Repeats one subtree over a list, either a literal `items` array or a bound field.
```yaml theme={"dark"}
type: Each
bind: { items: features }
style: { direction: column, gap: "2" }
template:
type: Text
bind: { value: label }
```
Draws one case out of several, chosen by a single discriminant field.
```yaml theme={"dark"}
type: Switch
on: view
cases:
products: { type: Text, value: The rail card }
detail: { type: Text, value: The full page }
```
Where a component renders inside an app. A bare slot is the conversation flow; one with `select` is a reaction surface.
```yaml theme={"dark"}
type: ComponentSlot
select: { from: all, where: { field: view, eq: detail }, limit: 1 }
frame:
type: Box
style: { direction: column, overflow: auto }
```
The conversation itself. You supply the user and assistant turn subtrees, and the stream fills them.
```yaml theme={"dark"}
type: Timeline
user:
type: Text
bind: { value: text }
assistant:
type: Markdown
bind: { value: text }
```
## Leaf
A string. Bound to a field, or a literal you typed.
```yaml theme={"dark"}
type: Text
bind: { value: title }
style: { font: headline.lg, color: text.primary }
```
An image, from a bound URL or a literal `src`.
```yaml theme={"dark"}
type: Image
bind: { src: primaryImage }
alt: Product photo
style: { width: full, radius: md, fit: cover }
```
Something to press. Carries the `action` that runs when it is pressed.
```yaml theme={"dark"}
type: Button
value: Choose plan
action:
type: setValue
values:
- { key: view, value: detail }
```
A text field. Its `bind.value` is the one two-way binding in the set: it reads and writes the same key.
```yaml theme={"dark"}
type: Input
bind: { value: draft }
placeholder: Ask a question
```
A choice from a fixed list of options.
```yaml theme={"dark"}
type: Select
bind: { value: plan }
options:
- { value: starter, label: Starter }
- { value: pro, label: Pro }
```
Renders markdown, for text an Agent wrote rather than text you laid out.
```yaml theme={"dark"}
type: Markdown
bind: { value: bodyCopy }
```
A loading placeholder in the shape of the thing that has not arrived.
```yaml theme={"dark"}
type: Skeleton
style: { width: full, height: "8", radius: md }
```
One glyph from the icon set. A literal name, or a bound field.
```yaml theme={"dark"}
type: Icon
icon: arrowRight
style: { color: text.secondary }
```
The voice indicator. Shows that a call is live and who is speaking.
```yaml theme={"dark"}
type: Orb
style: { width: "20", height: "20" }
```
## Helper
Composes an atom. `props` remaps fields onto it, `with` passes literals into it.
```yaml theme={"dark"}
type: Ref
ref: button
with: { label: Learn more, icon: arrowRight }
action: { type: setValue, values: [{ key: view, value: detail }] }
```
## Next steps
Every key a `style` block accepts, and what each one takes.
How these compose into something an Agent can send.