# Dashboard pack

Numbers to watch: amounts in a range, charts, devices and their status.

Added with: `npx prongs add dashboard` · Profile: [UI](https://www.prongs.dev/docs/intents/ui.md) · Intents: [6](#intents) · Domains: [`layout.*`](https://www.prongs.dev/docs/intents/layout.md)

## Adding it

```bash
npx prongs add dashboard
```

Copies the 6 intents below into your registry, skipping any it already has, and regenerates `PRONGS.md`. A “not for” line that points at an intent your registry does not have is left out.

## Intents

### [`layout.*`](https://www.prongs.dev/docs/intents/layout.md) Layout

| Intent | Status | Use it for |
|---|---|---|
| [`layout.meter`](https://www.prongs.dev/docs/intents/layout/meter.md) | `<div>` | An amount within a known range: battery, storage used, a quota. Give it aria-label, aria-valuenow, aria-valuemin and aria-valuemax, and one layout.meter.fill inside |
| [`layout.meter.fill`](https://www.prongs.dev/docs/intents/layout/meter-fill.md) | `<div>` | The filled part of a layout.meter. Set its width to the amount with style={{ width: "62%" }}; data-tone="warning" or "danger" when the amount is a problem |
| [`layout.chart`](https://www.prongs.dev/docs/intents/layout/chart.md) | `<figure>` | A chart: a trend over time, a breakdown. Renders <figure>; put the chart's svg or canvas inside with a height, and a text.caption that says what it shows |
| [`layout.blocks`](https://www.prongs.dev/docs/intents/layout/blocks.md) | `<div>` | An amount shown as a row of blocks, like a battery: the more blocks filled, the more of it. Each block is a layout.blocks.cell, with data-on on the filled ones; data-tone="success", "warning" or "danger" on the row colours them by level. Give it aria-valuenow, aria-valuemin and aria-valuemax |
| [`layout.blocks.cell`](https://www.prongs.dev/docs/intents/layout/blocks-cell.md) | `<div>` | One block of a layout.blocks; data-on when it is filled |
| [`layout.badged`](https://www.prongs.dev/docs/intents/layout/badged.md) | `<div>` | An icon or avatar with a status dot on its corner: a device and whether it is online. Put the icon first and a text.indicator last |

## Next to the starter

The starter intents this pack’s intents are told apart from. Each pack intent’s page says when to use which.

| Intent | Use it for | Resolves to |
|---|---|---|
| [`layout.loading`](https://www.prongs.dev/docs/intents/layout/loading.md) | Stands in for content that is still loading: a full-width line of text unless you give it the shape of what will appear | `<div>` |
| [`text.stat`](https://www.prongs.dev/docs/intents/text/stat.md) | A number that stands out on its own: a metric, a result, a price, an order total | `<p>` |
| [`text.indicator`](https://www.prongs.dev/docs/intents/text/indicator.md) | Marks something as new or unread, or shows a status, with no word or number. Give it an aria-label, like "Unread" or "Charging"; data-tone="success", "info", "warning", "danger" or "muted" colours a status; data-busy shows it is in progress | `<span>` |
| [`layout.labelled`](https://www.prongs.dev/docs/intents/layout/labelled.md) | An icon, avatar or logo beside its text: a person’s photo and name, an icon and its label. The text shrinks and wraps; the icon keeps its size | `<div>` |

## For registry authors

**Pack intent.** `prongs add dashboard` puts the dashboard pack’s intents in your registry. They are then yours like the starter intents: rename, restyle and add to them, and see them with `prongs add gallery`.