Tutorial

Nine short steps from an empty project to a themed, routed page with a token-enforced component. Each step ends with a check you can run, and every code sample on these pages is compiled by the docs test suite, so what you read is what works.

You need a project from the Quick start. Every command below runs in its folder.

1. A first component
2. State and templates
3. Props and variants through a contract
4. Styling with tokens
5. Theming and dark mode
6. Pages and routing
7. Layouts
8. Accessibility tests
9. Keeping it checked

The interactive in-browser version of this tutorial comes with the playground, which is deferred.