---
title: OpenUI Lang Syntax
description: Expression grammar and common component signatures.
---

OpenUI Lang is line-oriented:

```text
identifier = Expression
```

Example:

```text
root = Stack([title, form])
title = TextContent("Sign up", "large-heavy")
form = Form("signup", [nameField, emailField], actions)
nameField = FormControl("Name", Input("name", "Your name", "text", ["required"]))
emailField = FormControl("Email", Input("email", "you@example.com", "email", ["required", "email"]))
actions = Buttons([submitBtn, cancelBtn], "row")
submitBtn = Button("Submit", "submit:signup", "primary")
cancelBtn = Button("Cancel", "action:cancel", "secondary")
```

## Supported expression types

| Type           | Syntax                 | Example                           |
| -------------- | ---------------------- | --------------------------------- |
| Component call | `TypeName(arg1, arg2)` | `CardHeader("Title", "Subtitle")` |
| String         | `"text"`               | `"hello"`                         |
| Number         | `42`, `3.14`, `-1`     | `3.14`                            |
| Boolean        | `true` / `false`       | `true`                            |
| Null           | `null`                 | `null`                            |
| Array          | `[a, b, c]`            | `[col1, col2]`                    |
| Object         | `{key: value}`         | `{variant: "info"}`               |
| Reference      | `identifier`           | `nameField`                       |

## Rules

- First statement is the entry point.
- For OpenUI library prompts, start with `root = Stack(...)`.
- Arguments are positional, based on Zod key order.
- Optional args can be omitted from the end.
- Forward references are allowed.

## Common default-library signatures

| Component     | Signature                                                             |
| ------------- | --------------------------------------------------------------------- |
| `Stack`       | `Stack(children, direction?, gap?, align?, justify?, wrap?)`          |
| `Card`        | `Card(children, variant?, direction?, gap?, align?, justify?, wrap?)` |
| `TextContent` | `TextContent(text, size?)`                                            |
| `Form`        | `Form(name, fields, buttons)`                                         |
| `FormControl` | `FormControl(label, input, hint?)`                                    |
| `Input`       | `Input(name, placeholder?, type?, rules?)`                            |
| `Select`      | `Select(name, items, placeholder?, rules?)`                           |
| `Button`      | `Button(label, action, variant?, type?, size?)`                       |
| `Buttons`     | `Buttons(buttons, direction?)`                                        |
| `Tabs`        | `Tabs(items)`                                                         |
| `TabItem`     | `TabItem(value, trigger, content)`                                    |
| `Table`       | `Table(columns)`                                                      |
| `Col`         | `Col(label, data, type?)`                                             |
| `BarChart`    | `BarChart(labels, series, variant?, xLabel?, yLabel?)`                |

For full generated signatures, inspect:

```ts
openuiLibrary.prompt(openuiPromptOptions);
```
