# First wizard example

## Result

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

<figure><img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-b3ba09e743f016cbb6e3c92df05d35269d21fc4d%2Fimage%20(1).png?alt=media" alt=""><figcaption><p>The example form</p></figcaption></figure>

## Step1: Install

To use `TutimWizard`, install the `@tutim` libraries in your React project.\
You can do this using npm or yarn:

```bash
npm install @tutim/fields @tutim/headless @tutim/types
```

```bash
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

```jsx
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} />;
      </FormProvider>
    </div>
  );
};

export default App;
```

Voilà! 👨‍🎨

## Next steps

1. Craft your own form schema with [the builder](https://app.tutim.io) or [manual configuration](https://docs.tutim.io/api-reference/form-config):
2. Use your own design system with [`FormProvider`](https://docs.tutim.io/react-sdk/formprovider)
3. Have a question? [Join our Discord](https://discord.tutim.io) :)

###