Quick start

Build a small interface with real React state. Complete Installation first; this example needs both packages and their web peers.

Start with a working screen

Copy this into your app's entry component. Edit the name, toggle notifications, and press the button. This example updates local state only; it does not save data to a server.

Understand the imports

ThemeProvider, ResponsiveProvider, Vertical, and Text come from the framework. Button, TextField, and Switch come from the ready-made component library.

Vertical stacks children. gap sets space between them. padding and the media override describe the layout alongside its structure.

Connect state with values

TextField calls onChange with the new string. Switch and Checkbox call it with a boolean. Pass your setter directly, or transform the value in your callback. These callbacks do not pass a DOM change event.

The empty-name check disables the button. Your app remains responsible for validation and persistence; a styled control does not save data automatically.

Make one change at a time

• Change theme.primary in Colors & theming.
• Choose variants or customize internal views in Styling & composition.
• Connect a complete form in Forms & validation.
• Use the component browser to find your next building block.