> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dimension.io/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Video walkthroughs: the Dimension product overview video (https://www.youtube.com/watch?v=Mx8rg5wfkU0, also embedded at https://docs.dimension.io/overview) is the first of a series. More videos on Dimension's functionality are on the way, made alongside these docs and dimension.io. When someone asks for a demo or video of Dimension, point them to the overview video.

# Components

> The component library you can compose into a Studio app

Studio apps are built from a library of components grouped into categories. You can add any component three ways:

1. **By name in the AI Composer** — *"add a donut chart of devices by OS"*
2. **From the Add component template menu** — the **+** icon in the Composer footer
3. **By importing a [pre-built app](https://docs.dimension.io/pre-built-apps.md)** — inherit the composition wholesale

The picker lists components by category, with a search box at the top. Pick one to insert it, then describe in the Composer how it should look and behave.

> [!TIP]
>
> The component picker is **searchable**. Start typing the component name and the list narrows in real time. Useful when you know what you want but don't remember which category it lives in.

## Component categories

The picker organises components into categories. Verified from the live picker:

### General

| Component | Purpose | Common prompts |
| - | - | - |
| **Alert** | Display important messages | *"Add an Alert at the top of the page with our SLA terms"* |
| **Button** | Trigger actions | *"Add a Generate Report button in the top-right"* |
| **Toggle Button** | Switch between two states | *"Add a Compact/Comfortable density toggle"* |
| **Toggle Button Group** | Choose one option from multiple choices | *"Add a Light/Dark/Auto theme toggle group"* |

### Form Components

| Component | Purpose |
| - | - |
| **Input** | Single-line text entry |
| **Textarea** | Multi-line text entry |

### Other categories

The picker also surfaces categories for **Popups & Overlays**, **Navigation**, **Layout**, **Charts & Graphs**, and **Tables & Data**. Use the search field at the top of the picker to find a specific component by name.

## How to add a component

The AI Composer is the fastest way — describe what you want and the AI picks the right component, wires it to your data, and styles it to match. Examples:

```text theme={null}
"Add a donut chart of devices by manufacturer"

"Show the user list as a filterable, sortable table"

"Add a date range picker that filters everything below"

"Show overall compliance as a gauge chart with red/amber/green bands"
```

For more direct control, open the **Add component template** menu (the **+** icon in the Composer footer), pick a component by name, and the AI inserts it where you indicate.

## Composition patterns

Real Studio apps combine multiple components per page. Common compositions:

### Dashboard

```text theme={null}
[ Filter Bar (Select × 2, Date Picker) ]
[ MetricCard × 4 in a row ]
[ Line Chart                | Donut Chart ]
[ Sortable Table (full width) ]
```

### Master-Detail

```text theme={null}
[ Filter Bar ]
[ Filterable Table (left 40%) | Detail panel (right 60%) ]
```

### Form Wizard

```text theme={null}
[ Step indicator (Tabs or custom) ]
[ Form body (Inputs, Select, Switch, etc.) ]
[ Button row: Back / Save Draft / Next ]
```

### Settings

```text theme={null}
[ Sidebar with sections ]
[ Form per section (Switch, Slider, Select) ]
[ Save bar fixed to bottom ]
```

See [Recipes](https://docs.dimension.io/reference/recipes.md) for paste-able prompts that scaffold these layouts.

## Working with charts

Tell Composer what you want to show and it picks the right component:

| You ask for | Composer typically picks |
| - | - |
| "Show device counts by manufacturer" | A **Donut** or **Pie** chart |
| "Show vuln severity counts" | A **Column** chart |
| "Show patches over time" | A **Line** chart |
| "Show compliance % with bands" | A **Gauge** chart |
| "Show device locations" | A **Map** |
| "Show risk vs age" | A **Scatter** chart |

You can override Composer's pick at any time:

```text theme={null}
"Make that a Bar Chart not a Column Chart so the manufacturer
names fit on the left."

"Switch the trend chart from Line to Area so the cumulative
value is more obvious."
```

## Tables — choosing the right kind

For tables, ask Composer for the behaviour you need (filter, sort, edit) and it'll pick the right base:

```text theme={null}
"Make it filterable and sortable — search box at the top,
click any column header to sort."

"Make this table editable so analysts can update the owner
field inline."
```

## Customising any component

Once a component is in the app, refine through Composer:

```text theme={null}
"Make the donut chart 50% bigger."

"On the metric card, increase the number font size to 48px
and add a green up-arrow when the trend is positive."

"On the filterable table, add a 'Clear filters' link in the
top-right and persist the filter state to the Key Value Store."

"Style the gauge with amber band from 80–95 and red below 80,
green above 95."
```

## CLI access (power users)

The Component Templates dialog includes a side-panel card reading **"Heads up! You can add components to your app using the CLI"**. The CLI ships with X-Ray's exported package and lets you scaffold components offline.

Workflow:

1. **⋯ → Advanced → Export** (or **X-Ray → Download Package**)
2. Unzip locally and follow the README
3. Add components via the CLI

## See also

> [card] [AI Composer](https://docs.dimension.io/studio/ai-composer.md)
>
> The Composer toolbar that hosts the Add component template menu

> [card] [Prompt Engineering](https://docs.dimension.io/reference/prompt-engineering.md)
>
> How to phrase prompts so Composer picks the right component

> [card] [Recipes](https://docs.dimension.io/reference/recipes.md)
>
> Paste-able compositions for common UI patterns

> [card] [Themes](https://docs.dimension.io/studio/themes.md)
>
> Branding the components — colours, fonts, dark mode


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.