ShadCN Renderer

The ShadCN-style renderer is bundled as the default install path. This works immediately in a React app:

import { SchemaForm } from "@mackehansson/schemaform-shadcn";

<SchemaForm definition={definition} onSubmit={console.log} />;

You can also import the renderer explicitly:

import { SchemaForm, defaultRegistry } from "@mackehansson/schemaform-shadcn";

Source Map

The renderer source lives in packages/schemaform/src/shadcn. It wires Core and the React hooks into React Hook Form and ShadCN-style field components.

The first-party components are intentionally small and readable. Replace them through the Registry first; copy source only when you want to own the renderer or adapt it deeply to your design system.

What The Renderer Owns

The renderer owns:

• React Hook Form setup and field registration
• the Registry mapping widget names to components
• layout rendering for Pages, Groups, Columns, Controls, and Arrays
• field error display and pending validation state
• submit behavior through Core's submission projection

Core still owns rule evaluation, validation, visibility, required state, and submission payload semantics.

Common Customization Points

Most teams customize the renderer before they touch Core:

• replace the copied components with your design-system inputs
• add custom widgets to the Registry
• change layout spacing and field shells
• change submit button placement
• connect submission to your app's mutation or action layer
• swap React Hook Form for another form library by writing a new renderer against the same Core contract