---
title: Separator
url: "https://native-sdk.dev/docs/components/separator"
docs_index: /llms.txt
lastUpdated: 2026-10-16
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

A layout leaf that draws a line: a horizontal rule in a column, a thin vertical divider in a row (give the vertical form an explicit `width` and `height`). For flexible empty space between siblings, see [spacer](/docs/components/spacer).

## Markup

```html
<column gap="12" width="300">
  <text>Native SDK</text>
  <text foreground="text_muted">A component catalog rendered by the engine.</text>
  <separator></separator>
  <row gap="12" cross="center" height="20">
    <text>Docs</text>
    <separator width="1" height="16"></separator>
    <text>Source</text>
    <separator width="1" height="16"></separator>
    <text>Changelog</text>
  </row>
</column>
```

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically:

```zig
ui.column(.{ .gap = 12, .width = 300 }, .{
    ui.text(.{}, "Native SDK"),
    ui.text(.{ .style_tokens = .{ .foreground = .text_muted } }, "A component catalog rendered by the engine."),
    ui.separator(.{}),
    ui.row(.{ .gap = 12, .cross = .center, .height = 20 }, .{
        ui.text(.{}, "Docs"),
        ui.separator(.{ .width = 1, .height = 16 }),
        ui.text(.{}, "Source"),
        ui.separator(.{ .width = 1, .height = 16 }),
        ui.text(.{}, "Changelog"),
    }),
})
```

## Attributes

| Attribute | Description                                                                                                                                      |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `width`   | Definite width (plain number): the element is exactly this wide; content neither shrinks nor overflows it. On resizable it is the initial width. |
| `height`  | Definite height (plain number): the element is exactly this tall; content neither shrinks nor overflows it.                                      |

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)