Components

Components

React components wired to your proxies

Command dialogs, forms, tables, and application surfaces that consume Arc’s generated proxies. Components owns its public contracts, semantic parts, and built-in renderer, with optional MUI, PrimeReact 11, and PrimeReact 10 adapters released under the repository’s shared version.

Start here

Tutorial

Build a live list-and-detail screen with query-backed tables and command dialogs.

Getting started

Install the package, mount the provider, and render your first proxy-driven screen.

Why Components

Understand what Components adds to Arc-generated command and query contracts.

Choose a component area

Start from the screen job rather than a raw component inventory.

Styling

Use the built-in token/theme boundary or an explicitly selected renderer adapter.

Minimal setup

Components 4 runs on React 19 with @cratis/arc and @cratis/arc.react >=20.3.1 <23; this repository builds and tests against Arc 22.16.0. After npm install @cratis/components@^4, import the stylesheets once and mount Components’ provider inside Arc’s:

Excerpt: application entry

import 'reflect-metadata';
import '@cratis/components/tokens';
import '@cratis/components/styles';
import '@cratis/components/theme'; // optional built-in baseline
import { Arc } from '@cratis/arc.react';
import { CratisComponentsProvider } from '@cratis/components';

export const App = () => (
    <Arc>
        <CratisComponentsProvider value={{ locale: 'en-US' }} toaster>
            <YourApp />
        </CratisComponentsProvider>
    </Arc>
);

Getting started walks through the peers, the TypeScript setup, and a first command dialog. The package root is setup-only: import the provider and configuration helpers there, then import every component from its explicit subpath, such as @cratis/components/CommandDialog or @cratis/components/DataTables. The built-in renderer is zero-configuration. Optional renderer packages are selected explicitly; the application retains their provider, peer, SSR, styling, and license responsibilities. Read Renderer adapters and coexistence for the exact nine-slot boundary, direct vendor coexistence, custom composition, unsupported claims, and licensing policy.

Recipes

Build a form

Collect input and execute a command with CommandDialog and CommandForm fields.

Display data

Render a query or observable query with DataPage and the data-table wrappers.

Multi-step form

Gather information across named stages with StepperCommandDialog.

A list screen with actions

Build a full screen with rows, dialogs, toolbar actions, and selection details.

Component areas

Command input

Typed fields, forms, dialogs, and multi-step command flows.

Data display

Query-backed and local-array tables, list pages, filters, and detail surfaces.

Application surfaces

Dialogs, notifications, dropdowns, display primitives, page chrome, and toolbars.

Structured editors

JSON content, JSON Schema, navigation, canvas, pivot, and time-oriented views.

Relationship to Arc and Chronicle

Components consumes generated command/query contracts and React contexts from Arc. Applications may use Arc without Components, and Arc does not require event sourcing. Applications that use Chronicle commonly render its projected read models through these surfaces.

Evaluate the exact application profile

Package existence, examples, Storybook output, and passing checks do not establish universal maturity, accessibility, browser coverage, support, security, or production suitability. Optional renderer packages retain their own provider, dependency, styling, SSR, and license boundaries.

Continue

Components source

Package setup, migration guidance, contribution paths, and current limitations.

Components on npm

Published package metadata and versions.

Arc

The CQRS framework whose generated application contracts Components consumes.

Chronicle

The event-sourcing database and runtime behind projected read models.