Components
Preview and adapt Semaphor Data App UI components.
Semaphor Data App components are starter-included source components for common analytics UI mechanics: KPI cards, query-state boundaries, filters, server tables, and matrix tables.
The components help with UI mechanics, but the Data App SDK remains the runtime contract for queries, filters, execution status, and governed results.
Interactive Gallery
Preview the component gallery:
Open the Semaphor Data App Components gallery
The gallery is fixture-backed and does not require a Semaphor project token. It is a visual reference for the starter components and common Data App layouts.
Use With create-semaphor-app
For new apps, use the bootstrapper:
npx create-semaphor-app@latest my-data-appThe generated starter already includes Semaphor components, sample dashboards, and SDK wiring.
Use In An Existing App
Initialize shadcn first, using your own preset if you have one. The
<preset-id> value comes from shadcn create.
npx shadcn@latest init --preset <preset-id> --template viteThen use your app's own UI components when possible. If you need a reference implementation for Semaphor query states, filters, KPI cards, server tables, or matrix tables, copy or adapt the matching source from the Data App starter.
Available Items
| Item | Use When |
|---|---|
query-state | You need generic loading, error, empty, and success states. |
query-state-boundary | You pass raw useSemaphorQuery(...) results to a boundary and want SDK-shaped stale, partial, empty, and error handling. |
metric-kpis | You need KPI cards for metric results or multi-measure metric maps. |
filter-controls | You need date range, active filter summary, single-select, or multi-select controls wired to Semaphor input handles. |
server-data-table | You need a bounded records table with server-owned pagination and sorting. |
matrix-table | You need to render governed matrix or pivot results. |
Do not use UI components to infer fields, parse SQL, generate query specs,
or bypass Semaphor governance. Query specs should remain visible in app source
and flow through react-semaphor/data-app-sdk.