Guides
Custom React Components
Register your design-system components as the active ToonUI React catalog.
ToonUI does not render arbitrary generated React. It renders standard ToonUI nodes with components you register.
Direct runtime setup
import { createToonReactRuntime } from '@toon-ui/react';
const toon = createToonReactRuntime({
components: {
text: TextComponent,
card: CardComponent,
form: FormComponent,
field: FieldComponent,
button: ButtonComponent,
},
});Adapter setup
Use an adapter when you want metadata and coverage checks.
import { createToonReactAdapter, createToonReactRuntime } from '@toon-ui/react';
const adapter = createToonReactAdapter({
level: 'strict',
components: {
text: TextComponent,
card: CardComponent,
form: FormComponent,
field: FieldComponent,
button: ButtonComponent,
},
});
const toon = createToonReactRuntime({ adapter });Component props
import { getToonButtonProps, type ToonButtonComponentProps } from '@toon-ui/react';
function ButtonComponent(props: ToonButtonComponentProps) {
return (
<button {...getToonButtonProps(props)}>
{props.node.label}
</button>
);
}Use helpers like getToonButtonProps, getToonInputProps, and getToonCheckboxProps so you do not reimplement interaction wiring.