Formedible

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

Install via shadcn CLI

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

Component Features

Everything you need for building powerful forms with shadcn/ui

Schema Validation

Built-in Zod schema validation with real-time error handling and type safety

Component Override

Replace any field component with your custom implementations seamlessly

Custom Wrappers

Add animations, special styling, or extra functionality to any field

Multi-Page Forms

Built-in pagination with customizable progress indicators and navigation

Installation & Setup

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

Install the component via shadcn CLI

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

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

Basic usage example

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 />;
}

📦 What gets installed

• hooks/use-formedible.tsx - Main form hook
• components/fields/* - All field components (text, select, date, etc.)
• All required shadcn/ui components and dependencies
• TypeScript definitions and component interfaces

Get Started

Explore the interactive builder and comprehensive documentation

Simple Contact Form

Basic form with schema validation and standard field types

Interactive Builder

Build forms visually with our drag-and-drop interface. Create, customize, and export your forms with ease.

Documentation