Getting started

You’ve built an Arc backend — a RegisterAuthor command, an AllAuthors query — and dotnet build has generated the typed proxies for both. Now you need a screen: a form to add an author, a table that lists them and refreshes itself when one’s added.

You can build that straight on PrimeReact — instantiate the command, track its executing state, disable the button while it runs, render OK/Cancel, bind every field, call the query, subscribe to its observable, re-render on change. @cratis/components centralizes that integration around your generated proxies, so the same screen is a few declarative lines. Let’s wire it up.

Prerequisites

A React app — a Vite + React frontend (the dotnet new cratis template scaffolds one).
An Arc frontend that reaches your backend through generated proxies — the Arc frontend get-started sets that up. Components renders forms and tables on top of those proxies. If you scaffolded with dotnet new cratis, the package is already installed and you’re here to understand the pieces.

Install and wire it up

Install the package and its PrimeReact peers.
Install Components
```
npm install @cratis/components primereact primeicons
```
A few components pull extra peers only when you use them — pixi.js for PivotViewer, framer-motion for animated panels, allotment for DataPage. Skip them until you reach for those.
Import the styles once, at your app’s entry point:
main.tsx
```
import '@cratis/components/styles';
```
This ships the pre-compiled utility styles and the --cratis-* token layer the components read their colors and spacing from. It works with any bundler.

Mount the provider around your app:

import '@cratis/components/styles';
import { CratisComponentsProvider } from '@cratis/components';

export const App = () => (
    <CratisComponentsProvider>
        <YourApp />
    </CratisComponentsProvider>
);

What the provider sets up

That one wrapper does more than it looks. Components renders PrimeReact in unstyled mode with a pass-through preset, configures locale, ripple, and overlay z-index, and routes every component’s look through the --cratis-* tokens you just imported. The upshot: everything below it renders structurally right away, and it takes its visual identity from tokens you control — not from styles baked into the library.

The components sit between your typed proxies and PrimeReact: they speak commands and queries on one side, render PrimeReact on the other, and take their styling from tokens.

See the payoff

Here’s the add-author form — the whole thing. CommandDialog takes your generated command, renders the fields and the confirm/cancel buttons, and disables confirm while it executes:

import { CommandDialog } from '@cratis/components/CommandDialog';
import { InputTextField } from '@cratis/components/CommandForm';
import { RegisterAuthor } from './Authors/RegisterAuthor';   // generated proxy

export const AddAuthor = () => (
    <CommandDialog<RegisterAuthor> command={RegisterAuthor} title="Add author" okLabel="Add">
        <InputTextField<RegisterAuthor> value={i => i.name} title="Name" />
    </CommandDialog>
);

No isExecuting flag, no button wiring, no duplicate validation logic — and because RegisterAuthor is generated from your C#, i => i.name is type-checked against the real command. Rename the property in C#, rebuild, and this line stops compiling until you fix it.

Choose how it looks

The components render structurally the moment the provider is mounted; their look is a separate, deliberate choice. Pick one setup on the Styling page:

a ready-made PrimeReact theme,
a theme repainted with a custom --cratis-* palette, or
fully unstyled, with your own pass-through preset.

Recap

You installed @cratis/components, imported its styles, and wrapped your app in CratisComponentsProvider — and with that one provider in place, a typed command form is a handful of lines instead of a handful of files. Everything else in the library works the same way: declare it, point it at a proxy, done.

Where to go next

Building a form — CommandDialog, field types, validation, and multi-step wizards.
Displaying data — live data tables that re-render when the read model changes.
Choosing a component — a decision guide from “what’s on the screen” to the right component.
Build a full-stack feature — see Components consume a real Arc slice end to end.