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

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

Use `skeleton` as a placeholder while content loads. Set `width` and `height` to approximate the content, then replace it through a model-bound `if`. The engine animates its opacity; reduced-motion settings make it static. Use [spinner](/docs/components/spinner) for an indeterminate wait or [progress](/docs/components/progress) for a measurable fraction.

## Markup

```html
<row gap="12" width="320">
  <skeleton width="44" height="44"></skeleton>
  <column gap="8" grow="1" main="center">
    <skeleton height="14"></skeleton>
    <skeleton height="14" width="180"></skeleton>
  </column>
</row>
```

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically. Skeleton has no sugar method; use `ui.el` with the element kind.

```zig
ui.row(.{ .gap = 12, .width = 320 }, .{
    ui.el(.skeleton, .{ .width = 44, .height = 44 }, .{}),
    ui.column(.{ .gap = 8, .grow = 1, .main = .center }, .{
        ui.el(.skeleton, .{ .height = 14 }, .{}),
        ui.el(.skeleton, .{ .height = 14, .width = 180 }, .{}),
    }),
})
```

## 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)