# Components API (React)
Source: https://www.inngest.com/docs/reference/workflow-kit/components-api

The [`@inngest/workflow-kit`](https://npmjs.com/package/@inngest/workflow-kit) package provides a set of React components, enabling you to build a workflow editor UI in no time!

![workflow-kit-announcement-video-loop.gif](/assets/docs/reference/workflow-kit/workflow-demo.gif)

## Usage

```tsx {{ title: "src/components/my-workflow-editor.ts" }}
// import `PublicEngineAction[]`
// NOTE - Importing CSS from JavaScript requires a bundler plugin like PostCSS or CSS Modules
import "@inngest/workflow-kit/ui/ui.css";
import "@xyflow/react/dist/style.css";

MyWorkflowEditor = ({ workflow }: { workflow: Workflow }) => {
  useState<typeof workflow>(workflow);

  return (
    <Provider
      workflow={workflowDraft}
      trigger={{ event: { name: 'blog-post.updated' } }}
      availableActions={actionsDefinitions}
      onChange={updateWorkflowDraft}
    >
      <Editor>
        <Sidebar position="right"></Sidebar>
      </Editor>
    </Provider>
  );
};
```

## Reference

### `<Provider>`

<Callout>

`<Provider>` is a [Controlled Component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components), watching the `workflow={}` to update.

Make sure to updated `workflow={}` based on the updates received via `onChange={}`.

</Callout>

<Properties>
  <Property name="workflow" type="Workflow" required>
    A [Workflow instance object](/docs/reference/workflow-kit/workflow-instance).
  </Property>
  <Property name="trigger" type="object" required>
    An object with a `name: string` property [representing an event name](/docs/reference/functions/create#trigger).
  </Property>
  <Property name="availableActions" type="PublicEngineAction[]">
    See [the `PublicEngineActionEngineAction[]` reference](/docs/reference/workflow-kit/actions#passing-actions-to-the-react-components-public-engine-action).
  </Property>
  <Property name="onChange" type="function" required>
    A callback function, called after each `workflow` changes.
  </Property>
  <Property name="{children}" type="React.ReactNode" required>
    The `<Provider>` component should always get the following tree as children:
  </Property>
</Properties>

    ```tsx
    <Editor>
      <Sidebar position="right"></Sidebar>
    </Editor>
    ```