shadcn/ui Registry Component

Schema-Driven Forms
Made Simple

A powerful React hook that wraps TanStack Form with shadcn/ui components. Features schema validation, multi-page support, component overrides, and custom wrappers.

Install Now

Try Builder

Rental Car Flow Form

Personalized one-field-per-page flow with conditional logic and dynamic text

Rental Car Finder

Answer a few questions and we'll find the perfect car for your trip. This form demonstrates dynamic text that personalizes based on your responses.

Dynamic TextOne Field Per PageConditional LogicFlow Form

Installation & Setup

Get the use-formedible hook installed in your project that uses shadcn/ui

Install via shadcn CLI

This installs the hook, all field components, and their dependencies automatically.

npx shadcn@latest add https://formedible.dev/r/use-formedible.json

Basic Usage Example

Quick example showing how to create a form with validation

import { useFormedible } from "@/hooks/use-formedible";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("Invalid email"),
  message: z.string().min(10, "Message too short"),
});

export function MyForm() {
  const { Form } = useFormedible({
    schema,
    fields: [
      { name: "email", type: "email", label: "Email" },
      { name: "message", type: "textarea", label: "Message" },
    ],
    formOptions: {
      defaultValues: { email: "", message: "" },
      onSubmit: async ({ value }) => console.log(value),
    },
  });

  return <Form />;
}