Renderers, themes, and styling

The starter keeps package rendering contracts separate from application presentation. Import form0-react/index.css once, then layer application-specific choices on top.

Field renderers

Application renderer overrides live in src/field-renderers. To add one:

1. Create the React component.
2. Add it to src/field-renderers/resolver.js under a stable identifier.
3. Map the form0 field type to that identifier in form0.config.js.

Code
fieldRenderers: {
  DateField: "date-field-shadcn",
}

The included date renderer demonstrates composing form0 field props with shadcn/ui primitives. Review the custom renderer contract before creating additional overrides.

Themes

Set theme.mode to light, dark, or system. To replace the package theme, create a Vanilla Extract theme under src/themes and set theme.customTheme to its import path.

The custom theme must implement the complete form0-react theme contract. Use src/themes/custom-example.css.js as the starting point and see Themes and styling for the contract.

Application CSS

Use these layers for different responsibilities:

• src/index.css for Tailwind, shadcn tokens, and global application styles;
• src/App.css for application layout;
• src/styles/form0-overrides.css for application-owned form classes; and
• Vanilla Extract themes for package renderer tokens.

Prefer renderer registration and theme contracts over editing code inside installed form0 packages.