Fillout Flow

Schema-driven Fillout flow renderer with components from the circle-ui namespace and compatible submission payloads.

Install

pnpm dlx shadcn@latest add @blocks/fillout-flow

Use

The built-in mapper covers common choice, text, email, phone, number, and date fields. Use a kind override or custom renderer for other Fillout field types.

import {
  FilloutFlow,
  createFilloutFlowDefinition,
  type FilloutFormMetadata,
} from "@circle/ui";

const flow = createFilloutFlowDefinition(form as FilloutFormMetadata, {
  steps: [
    { id: "goal", fields: ["kaRM"] },
    { id: "details", fields: ["h8ay", "goHS"] },
  ],
});

<FilloutFlow flow={flow} onSubmit={submitToFillout} />;

Setup

Fetch Fillout form metadata through a server or safe API route.
Group question ids into a flow definition.
Post the resulting payload back to Fillout from the submit callback.

Works with

flow — Use the lower-level shell when Fillout is not the schema source.

Dependencies

Kind	Packages
Registry	`@blocks/fillout-flow-schema, @blocks/fillout-flow-submission, @blocks/use-fillout-flow, @circle-ui/container, @circle-ui/date-picker, @circle-ui/form, @circle-ui/text`