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

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

Use `panel` for a surface with a background, border, and radius. Its children stack over one another; `gap` is rejected. Put a row or column inside to arrange content. Bind `on-press` to make the surface pressable. See [Native UI](/docs/native-ui) for color tokens.

## Markup

```html
<panel width="340" padding="16">
  <column gap="6">
    <text>Build output</text>
    <text wrap="true" foreground="text_muted">Build completed.</text>
  </column>
</panel>
```

## Programmatic construction (Zig)

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

```zig
ui.panel(.{ .width = 340, .padding = 16 }, .{
    ui.column(.{ .gap = 6 }, .{
        ui.text(.{}, "Build output"),
        ui.text(.{ .wrap = true, .style_tokens = .{ .foreground = .text_muted } }, "Build completed."),
    }),
})
```

## Attributes

| Attribute  | Description                                                                                                                                                                                                  |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `padding`  | Uniform padding (plain number).                                                                                                                                                                              |
| `width`    | Definite width (plain number): the element is exactly this wide; content neither shrinks nor overflows it. On resizable it is the initial width.                                                             |
| `on-press` | Dispatch a Msg on press: tag or tag:\{payload}. Legal on any element — a bound press handler makes it pressable, and presses on plain text/icons inside it fall through to it (dragging still selects text). |

---

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)