React components for CQRS and event-sourced applications built with Cratis Arc — command dialogs, typed forms, and query-backed data tables.
Cratis Components is a React component library aligned with the patterns of Arc, the Cratis CQRS application framework for ASP.NET Core. The components consume Arc's generated TypeScript proxies, so commands, queries, and read models flow fully typed from your backend into the UI — including event-sourced applications backed by Chronicle, the Cratis event-sourcing database and runtime.
The library builds on PrimeReact and ships with flexible styling: use the Cratis baseline theme, PrimeReact's styled mode, your own palette, or go fully unstyled with a pt preset.
Components carries the same design intent as the rest of Cratis: building on an event-sourced backend should feel like ordinary React, with typed commands, queries, and read models designed to take friction and boilerplate out of the UI layer. It is part of one deliberately simple ecosystem, built with productivity, quality, and reliability in mind — AI-friendly by design, with free AI skills for building with the stack.
@cratis/components itself is MIT licensed. Version 3.x builds on PrimeReact 11, which carries its own license terms — see the licensing section in the package README for details.
npm install @cratis/components primereact @primereact/core @primereact/headless @primereact/hooks primeiconsimport '@cratis/components/tokens';
import '@cratis/components/styles';
import { CratisComponentsProvider } from '@cratis/components';
import { DataPage } from '@cratis/components/DataPage';
export const App = () => (
<CratisComponentsProvider>
<YourApp />
</CratisComponentsProvider>
);See the package README for peer dependencies, stylesheets, and styling setups, and the getting started guide for a full walkthrough.
| Component | What it does |
|---|---|
CommandDialog / CommandStepper |
Instantiates, validates, and executes a generated Arc command — single-step or multi-step |
CommandForm |
Typed input fields bound to command properties — text, number, dropdown, date, and more |
DataPage |
A resizable page that lists query data with toolbar actions and detail panels |
DataTables |
Data-table wrappers that render an Arc query or observable query, with filtering and paging |
Dialogs |
Data-collection dialogs that return values without executing a command |
Chat |
Topic-based chat with host-supplied data, mentions, emoji, and per-message actions |
SchemaEditor |
Edit JSON schemas visually |
TimeMachine |
Navigate state over time — a natural fit for event-sourced read models |
PivotViewer |
Explore collections across multiple dimensions |
Notifications, Toolbar, Dropdown, Display, … |
Supporting building blocks — see the full export list |
This project is part of Cratis — free, MIT-licensed tools for building event-sourced and CQRS applications.
- Chronicle — event-sourcing database and runtime. Orleans-based kernel, pluggable storage (MongoDB default; PostgreSQL, SQL Server, SQLite, in-memory), language-agnostic gRPC contracts. Docs
- Chronicle clients — first-class .NET SDK, plus TypeScript, Kotlin/Java, and Elixir; Python coming soon (pre-alpha). AI agents connect through the Chronicle MCP server.
- Arc — opinionated CQRS framework for ASP.NET Core with commands, queries, validation, authorization, and TypeScript proxy generation. Works without event sourcing. Docs
- Components — this repository. Docs
- CLI + Workbench — inspect and diagnose Chronicle from the terminal or the browser. Docs
- Supporting — Fundamentals, Specifications, Synopsis, Lens, Narrator
- Samples — runnable event sourcing and CQRS samples for the whole stack
Blog: blog.cratis.io
Cratis is an open community, and we are glad to help users, teams evaluating the stack, and contributors.
| Channel | Details |
|---|---|
| Discord | Join the community on Discord for questions and discussions |
| GitHub Issues | Report bugs or request features |
| Documentation | Read the docs at cratis.io |
Release notes and announcements: the Cratis blog.