# OpenUI Lang Syntax

> Expression grammar and common component signatures.

Source: https://www.openui.com/docs/openui-lang/syntax

OpenUI Lang is line-oriented:

```text
identifier = Expression
```

Example:

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

## Supported expression types [#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 [#rules]

* `root` is the entry point. Without it, the first statement that calls the root component is used.
* 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 [#common-default-library-signatures]

These are the signatures in `openuiLibrary` from `@openuidev/react-ui`.

| 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, buttons, fields?)`                                        |
| `FormControl` | `FormControl(label, input, hint?)`                                    |
| `Input`       | `Input(name, placeholder?, type?, rules?, value?)`                    |
| `Select`      | `Select(name, items, placeholder?, rules?, value?, size?)`            |
| `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?, height?)`       |

For full generated signatures, inspect:

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