cratis-components-styling

Styling Cratis Components

Cratis Components 4 owns its markup and its styling contract. There is no third-party theme engine, preset or provider underneath it: what a Cratis application looks like is decided by three Cratis-owned stylesheet entries and the --cratis-* custom properties they read. Getting the setup wrong shows up as components rendering completely unstyled, which is the single most common first-run problem — start by checking the CSS entry.

Verified product sources

Components declares no PrimeReact, PrimeIcons or PrimeUI dependency or peer. React Aria supplies focus, overlay, collection and date behavior internally — you never import it, never style its class names, and it never appears in an application's manifest. Remove any leftover Prime packages that only Components used to need (Source/MIGRATION.md lists them); keep one only if the application itself still imports it directly, and then that island's provider, theme and license are the application's.

Step 1 — What an app must do

Two things, or the components render unstyled:

1. Import the stylesheets, in this order, in index.css; the entry point imports that file with import './index.css':

   @import '@cratis/components/tokens';
   @import '@cratis/components/styles';
   @import '@cratis/components/theme'; /* optional baseline */
   

   Direct CSS subpath imports from TypeScript need ambient declarations on TypeScript 6, otherwise TS2882. To avoid the roughly 32 KiB gzip aggregate, replace styles with styles/base and the needed <subpath>/styles entries (for example Dialogs/styles, DataTables/styles). Area order does not matter.

   tokens first — styles and theme both read it. styles also carries the split-pane CSS the DataPage details pane needs; use the aggregate or the corresponding area sheets even in a fully custom-styled app. styles contains no Tailwind Preflight, no global reset and no copy of the token values.