First wizard example


In 2 minutes you'll get a basic form in your React project:
The example form

Step1: Install

To use TutimWizard, install the @tutim libraries in your React project. You can do this using npm or yarn:
npm install @tutim/fields @tutim/headless @tutim/types
yarn add @tutim/fields @tutim/headless @tutim/types

Step 2: Run

To create a form using TutimWizard, you will need to define the form schema. In this example, the schema is hard-coded in config, but you can craft your wizard in the portal
import { TutimWizard, defaultFields } from "@tutim/fields";
import { FormProvider } from "@tutim/headless";
// The form's schema
const config = {
fields: [
key: "fullname",
label: "Full Name",
type: "text",
isRequired: true
{ key: "date", label: "Pick a date", type: "date" },
// Your App
const App = () => {
return (
<div className="App">
<FormProvider fieldComponents={defaultFields}>
<TutimWizard onSubmit={console.log} config={config} />;
export default App;
Voilà! 👨‍🎨

Next steps

  1. 1.
    Craft your own form schema with the builder or manual configuration:
  2. 2.
    Use your own design system with FormProvider
  3. 3.
    Have a question? Join our Discord :)