React

Install

Styles and fonts

Load once at the application root. White is the default; set data-theme="dark" for dark mode. Typography comes from the shared tokens.

Contract

• onInput fires while editing. onChange follows native commitment: blur for text, toggle for checkboxes, commit for sliders. This differs from React’s native text onChange.
• These callbacks receive DOM events. Read event.currentTarget.value or .checked synchronously; reset controlled state in the form’s onReset handler.
• refs point to custom elements and support their focus and validation methods. Put a router Link or button in the action slot to handle navigation.
• This React Router example is also tested in Strict Mode against installed packages. It covers external state, FormData, reset, slots, and focus.

Try it

Open the React / Next.js notes example. Create, edit and delete notes stored only in this browser.

Try the Kanban board. Create tasks, move them between columns, and undo a move. Tasks are saved separately from notes.

Form, navigation, modal and async toast recipes

Example

Scope

Import components individually. Charts and motion remain optional. See validation and limitations for the tested combinations.