Autoform

Overview

AutoForm automatically renders forms from an existing data schema. Given a Zod, Yup or Joi schema that is already used elsewhere, such as in a backend API, it maps each field to the right input component, wires it into the form library and sets up validation.

It is meant as a drop-in form builder for internal tools, admin panels and simple forms rather than a full-featured builder for every edge case. AutoForm started as a shadcn/ui component and grew into a schema-, renderer- and UI-agnostic library in a TurboRepo monorepo, with official integrations for shadcn/ui, Material UI, Mantine, Ant Design and Chakra UI. All packages are MIT licensed.

Features

• Schema providers: Official support for Zod, Yup and Joi schemas.
• Form library adapters: Guides for React Hook Form and TanStack Form.
• UI integrations: shadcn/ui (via the shadcn CLI), Material UI, Mantine, Ant Design and Chakra UI.
• Customization: The fieldConfig option and a customizable renderer act as escape hatches as forms grow.
• Normal form access: Custom inputs, state and methods still work the way the underlying form library expects.
• Agent skill: An optional skill gives AI coding assistants AutoForm docs, examples and best practices.

Tech stack

• React, TypeScript
• React Hook Form or TanStack Form
• Zod, Yup or Joi
• shadcn/ui and other UI libraries

Getting started

npm install @autoform/react react-hook-form @hookform/resolvers
npx shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform-rhf.json