# A dashboard that fits the way you work.

> KPI boards people arrange, from the keyboard too.

Language: en
Canonical: https://texuli.com/solutions/dashboards/
Markdown: https://texuli.com/solutions/dashboards.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

Solution · Dashboards

Arrange KPI widgets, compare a reporting period and explore the data with filters. The live board runs on fictional data, entirely in your browser. The metric-card and filter-bar components shown here were released in @texuli/data 0.18.0.

Status: in development

[Explore the dashboard](https://texuli.com/solutions/dashboards/#demo)[Start building](https://texuli.com/solutions/dashboards/#quickstart)

## Explore a dashboard, then arrange it

Try this

- Choose product analytics, support operations or a sales pipeline.
- Change the reporting period or clear the Region filter to update the sample KPIs.
- Use Move and Resize handles with the keyboard, or drag a widget by its handle.

Use Reset to return to the starting example.

Product analytics

 Mar 1–10, 2026

### Active users

4,670

↑ 8.4% vs. previous period

 Active users trend

### Activation rate

42.0%

↑ 2.1 pts vs. previous period

 Activation rate trend

### Returning users

31.0%

→ 0.3 pts vs. previous period

 Returning users trend

### Support tickets

163

↓ 5.2% vs. previous period

 Support ticket trend

Scenario

Activation and returning users across fictional product regions.

 Region eq North

Add filter

 Filters Match of these conditions

- Condition 1 Field Operator Value

 Unsaved changes

Product analytics loaded with the North region filter.

Press Space or Enter to pick up. Use the arrow keys to move one column or row, Space or Enter to drop, Escape to cancel.

Press Space or Enter to resize. Left and right arrows change the width, up and down the height. Space or Enter to finish, Escape to cancel.

- ### Active users ### Active users 3,350 Up: 8.4% vs. previous period · 10 days Active users trend for Product analytics
- ### Activation rate ### Activation rate 43.0% Up: 2.1 pts vs. previous period · 10 days Activation rate trend for Product analytics
- ### Returning users ### Returning users 32.5% Flat: 0.3 pts vs. previous period · 10 days Returning users trend for Product analytics
- ### Support tickets ### Support tickets 64 Down: 5.2% vs. previous period · 10 days Support tickets trend for Product analytics

Layout changes stay in this preview and are not saved.

If the interactive demo cannot load, use the static preview above.

## One board, several ways to see the work

### See product signals together.

Compare active users, activation and retention in one board. The sample responds to the selected date range and region filter.

- KPI widgets
- Filters and date range

### Spot support pressure early.

Review incoming tickets, first response time and customer satisfaction, then rearrange the widgets to put the urgent signals first.

- Arrange widgets
- KPI widgets

### Keep the pipeline in view.

Read pipeline value, win rate and deal volume together. Move or resize cards using pointer gestures or the keyboard handles.

- Arrange widgets
- Filters and date range

## From sample rows to a board you can arrange.

- ### Choose a view Select product analytics, support operations or a sales pipeline.
- ### Set the period Pick a reporting range; the preview scales the fictional sample to that window.
- ### Filter the rows Apply a Region condition, inspect its chip, or clear filters to restore all sample rows.
- ### Arrange the board Move and resize each widget with a pointer or the keyboard.Package: `@texuli/data`

Dashboards is built from @texuli/data, on texuli, @texuli/tokens, @texuli/primitives, @texuli/core and @texuli/drag.

Solution

Dashboards

Packages

- L4[`@texuli/data`](https://www.npmjs.com/package/@texuli/data) Dashboard grid, layout engine, filter builder and filter bar Subpaths: ./dashboard · ./dashboard/engine · ./filter-builder · ./filter-bar

Built on

- L3 `texuli` (Styled components)
- L2 `@texuli/tokens` (Theme tokens)
- L1 `@texuli/primitives` (Headless primitives)
- L0 `@texuli/core` (Texels and the URL policy)
- L0 `@texuli/drag` (Drag engine)

Build with Dashboards

## Start with a widget grid

### Install

```
pnpm add @texuli/data
```

### Compose a dashboard

```
<script lang="ts">
  import { Dashboard, DashboardWidget } from '@texuli/data/dashboard';
</script>

<Dashboard label="Operations" editable>
  <DashboardWidget id="revenue" title="Revenue" x={0} y={0} w={6} h={2}>
    <p>$48,290</p>
  </DashboardWidget>
</Dashboard>
```

Verified by `the @texuli/data/dashboard API and the dashboard behavior suite`

## Keep building

- ### [Build a dashboard grid](https://texuli.com/dashboards-page/) Use the widget grid and keyboard handles in your own Svelte view.
- ### [Read the widget API](https://texuli.com/dashboards-page/) Start with the released dashboard grid, then use the new controls when they ship to npm.
- ### [Explore data components](https://texuli.com/dashboards-page/) Compose dashboard widgets with the data package and chart primitives.

## For agents

The catalog can describe dashboard layouts as data. The interactive demo itself uses only local fictional rows and does not contact a service.

- [MCP server](https://texuli.com/mcp-server/)
- [Agent skill](https://texuli.com/skill/)
- [Building with agents](https://texuli.com/agents-page/)

- `data-dashboard` data-dashboard: In developmentCatalog component for a host-rendered dashboard layout.
- `data-dashboard-widget` data-dashboard-widget: In developmentCatalog component for a dashboard widget in a validated blueprint.

## Platforms

- ### Web Web: In developmentSvelte 5 packages published on npm (pre-1.0).
- ### Compose Desktop Compose Desktop: PlannedKotlin Multiplatform renderer on the JVM, built in this repository.
- ### Android Android: PlannedNative renderer target.
- ### iOS iOS: PlannedNative renderer target.

[How the native renderer works](https://texuli.com/native/)

## More Solutions

- ### [Slides](https://texuli.com/solutions/slides/) Write decks as JSON or Markdown and present them in the browser.Status: in development
- ### [Documents](https://texuli.com/solutions/documents/) Edit, read, paginate and export block documents.Status: in development
- ### [Workflows](https://texuli.com/solutions/workflows/) Author and view workflow graphs inside your app.Status: in development
- ### [Canvas](https://texuli.com/solutions/canvas/) An embeddable whiteboard with shapes, connectors and export.Status: in development
- ### [Sheets](https://texuli.com/solutions/sheets/) An embeddable spreadsheet with formulas and CSV.Status: in development
- ### [Design systems](https://texuli.com/solutions/design-systems/) Carry one brand document across Texuli surfaces.Status: available
- ### [Forms](https://texuli.com/solutions/forms/) Schema-driven forms with conditions, steps and drafts.Status: in development
- ### [Agent chat](https://texuli.com/solutions/agent-chat/) A thread whose replies paint validated blueprints.Status: in development
- ### [Rich text editor](https://texuli.com/solutions/editor/) Owned rich text with Markdown in and out, safe paste and export to any chat.Status: in development

## Start building with Dashboards

KPI boards people arrange, from the keyboard too.

[Build a dashboard](https://texuli.com/guides/solutions/dashboards/)[Capability reference](https://texuli.com/dashboards-page/)[@texuli/data on npm](https://www.npmjs.com/package/@texuli/data)

 ![A low horizon of stacked cubes rising to one glowing pearl cube under a wide open sky](https://texuli.com/_astro/home-final.BGuYKnjC.webp) ![A low horizon of stacked cubes rising to one glowing pearl cube under a wide open sky](https://texuli.com/_astro/home-final.BGuYKnjC.webp)

## For agents

Arrange a KPI board: the live Dashboards demo runs in the browser on fixture data. Uses fictional browser-local sample data; it makes no network requests and saves no layout or filters. FilterBar and MetricCard were released in @texuli/data 0.18.0; earlier releases do not have them. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

Limits today:

- Pre-1.0 and in development: a new minor version may break the API.
- FilterBar and MetricCard were released in 0.18.0 and are in development.
- /dashboards-page/ stays as the capability reference; it is not redirected (ADR-036).

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `catalog.search`: Search the component catalog.
- `component.get`: Read a component manifest.
- `blueprint.validate`: Validate a blueprint draft.

Docs:

- [Dashboards docs](https://texuli.com/guides/solutions/dashboards/)
- [@texuli/data README](https://github.com/DailybotHQ/texuli/blob/main/packages/data/README.md)
