React components and hooks for embedding Fillo forms natively inside your product — rendered in your own DOM, with your styles, on your route. No iframe.

📚 Full documentation → fillo.so/docs

npm i @usefillo/react

react and react-dom (18 or 19) are peer dependencies.

Write forms as components

"use client";
import { Fillo, when, createClient } from "@usefillo/react";
import "@usefillo/react/styles.css"; // optional default theme — or bring your own

const client = createClient({ key: process.env.NEXT_PUBLIC_FILLO_KEY });

export function ContactForm() {
  return (
    <Fillo.Form id="contact" title="Talk to us" client={client}>
      <Fillo.Text id="name" label="Your name" required />
      <Fillo.Email id="email" label="Work email" required />
      <Fillo.Select id="topic" label="Topic" required>
        <Fillo.Option id="sales" label="Sales" />
        <Fillo.Option id="support" label="Support" />
      </Fillo.Select>
      <Fillo.LongText id="message" label="How can we help?"
                      visibleIf={when("topic").eq("support")} />
    </Fillo.Form>
  );
}

The first time this runs, the form appears in your Fillo workspace as a draft — publish it there and responses, logic, exports, webhooks, and integrations all work. Field ids are permanent (they key your responses); conditional questions are visibleIf, never conditional JSX. The equivalent config style, defineForm({ id, pages }), remains first-class — JSX compiles to it exactly.

Or embed a form built in the dashboard

import { FilloForm } from "@usefillo/react";

<FilloForm formId="cust-feedback" onSubmitted={(r) => confetti()} />

Style it with your own classes

<Fillo.Form
  id="contact"
  client={client}
  appearance={{
    theme: { primary: "#4f46e5", radius: "12px" }, // also themes your hosted page
    classNames: {
      control: "rounded-xl border-zinc-200 data-[invalid]:border-red-400",
      option: "rounded-lg border p-3 data-[selected]:border-indigo-600",
      button: (s) => (s.variant === "primary" ? "bg-indigo-600 text-white" : ""),
    },
    fields: { nps: { control: "grid grid-cols-11 gap-1" } },
  }}
>

Every rendered part carries a named slot (data-fillo) and state attributes (data-invalid, data-selected, data-checked, …), and the default stylesheet is cascade-layered so your utilities always win. On Tailwind v3 or reset-heavy sites import @usefillo/react/styles.unlayered.css instead. Localize every built-in string with the strings prop. Styling contract: fillo.so/docs/styling.

Go fully headless

Every part is replaceable — and every embed method is free:

components / customComponents — swap any field kind for your own
<FilloProvider> + <FormField> / useField() — your layout, Fillo's engine
useFilloController() — the bare engine for total control

URL prefill works in embeds (?field=value, hidden-field paramName), submissions retry safely, and failed submits show a visible, answer-preserving error. This package re-exports the embedding surface from @usefillo/core so a single import is usually enough.