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

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

Use `sheet` for a modal surface aligned to the right edge of the root view. It spans the root height regardless of its parent container. Set `width` to size it, render it inside a model-bound `if`, and clear the open flag on `on-dismiss` after Escape or a click outside. Children stack over the content box; begin an inner body column with a spacer to leave room for the title. See [dialog](/docs/components/dialog) and [drawer](/docs/components/drawer) for other placements.

## Markup

```html
<column padding="24">
  <button variant="outline" icon="external-link" on-press="open_share">Share</button>
  <if test="{share_open}">
    <sheet text="Share" width="320" padding="24" on-dismiss="close_share">
      <column gap="12">
        <spacer height="34"></spacer>
        <text wrap="true" foreground="text_muted">Anyone with the link can view this board.</text>
        <row gap="8">
          <input text="{share_url}" label="Share link" grow="1"></input>
          <button variant="secondary" icon="copy" on-press="copy_link">Copy</button>
        </row>
      </column>
    </sheet>
  </if>
</column>
```

## Programmatic construction (Zig)

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

```zig
ui.el(.sheet, .{ .text = "Share", .width = 320, .padding = 24, .on_dismiss = .close_share }, .{
    ui.column(.{ .gap = 12 }, .{
        ui.column(.{ .height = 34 }, .{}), // clears the engine-drawn title line
        ui.text(.{ .wrap = true, .style_tokens = .{ .foreground = .text_muted } }, "Anyone with the link can view this board."),
        ui.row(.{ .gap = 8 }, .{
            ui.el(.input, .{ .text = model.share_url, .grow = 1, .semantics = .{ .label = "Share link" } }, .{}),
            ui.button(.{ .variant = .secondary, .icon = "copy", .on_press = .copy_link }, "Copy"),
        }),
    }),
})
```

## Attributes

The sheet rejects `gap` — it layers children like the other stacking surfaces; put a column (or row) inside for flow.

| Attribute    | Description                                                                                                                                                                                                                                                                                                   |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text`       | Text value for text-bearing elements; a literal or one \{binding}.                                                                                                                                                                                                                                            |
| `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.                                                                                                                                                                                                   |
| `padding`    | Uniform padding (plain number).                                                                                                                                                                                                                                                                               |
| `on-dismiss` | Dismissible surfaces only (dialog, drawer, sheet, dropdown-menu): Msg dispatched when Escape or a click outside dismisses the surface, so the MODEL owns the close (clear the open flag in update). The engine hides the surface immediately as an optimistic echo; the source tree wins on the next rebuild. |

---

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)