Headless 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.

import { FilloForm } from "@usefillo/react";
import "@usefillo/react/styles.css"; // optional default theme — or bring your own

export function Feedback() {
  return <FilloForm formId="cust-feedback" onSubmitted={(r) => confetti()} />;
}

Every part is replaceable. Pass your own field components, theme the form via the theme prop, or drop down to the hooks and own the entire render:

<FilloForm> / <FilloProvider> — render a form, or wrap your own layout
useFillo() / useField() — build a fully custom UI against form state
useFilloController() — headless controller for total control
FormField / BlockRenderer — render individual blocks
defineForm() — author a form in code and sync it to your workspace on first run

Published formId embeds can fetch and submit without a publishable key. Use createClient({ key }) when syncing defineForm() schemas from code, or when you need to point the SDK at a custom API origin.

For tiny feedback widgets, set settings.submitMode: "auto" on a select/rating/checkbox/dropdown/linear scale form. The default renderer hides the first submit button, submits after a complete discrete answer, and brings the submit button back if that answer opens a text or upload follow-up. Add submissionLimit: "once_per_visitor" for browser-scoped one-response feedback.

The default stylesheet follows system dark mode for unthemed embeds. Pass theme={{ colorScheme: "dark" }} or "light" when the host surface is known.

This package re-exports the embedding surface from @usefillo/core (createClient, FormSchema, FormTheme, …) so a single import is usually enough.