Getting Started
New to AutoForm? Check out the introduction first.
Migrating from the old shadcn/ui component? Check out the migration guide.
Install the AutoForm Agent Skill (optional)
If you use AI coding assistants (such as Cursor, Claude Code, Opencode, or GitHub Copilot), you can install the AutoForm skill. It gives your coding agent access to AutoForm-specific documentation, examples, and best practices.
npx skills add https://github.com/adityacodepublic/autoform/tree/acp-package/skills --skill autoformpnpm dlx skills add https://github.com/adityacodepublic/autoform/tree/acp-package/skills --skill autoformyarn skills add https://github.com/adityacodepublic/autoform/tree/acp-package/skills --skill autoformbunx --bun skills add https://github.com/adityacodepublic/autoform/tree/acp-package/skills --skill autoformInstall AutoForm's integration to your UI library
AutoForm integrates directly into your UI library to render forms. You can choose from the following official integrations:
Before installing an @autoform UI package make sure you have installed:
react-hook-form
@hookform/resolvers
Shadcn/ui
npx shadcn@latest add https://raw.githubusercontent.com/adityacodepublic/autoform/refs/heads/acp-package/packages/shadcn/registry/autoform.jsonpnpm dlx shadcn@latest add https://raw.githubusercontent.com/adityacodepublic/autoform/refs/heads/acp-package/packages/shadcn/registry/autoform.jsonyarn shadcn@latest add https://raw.githubusercontent.com/adityacodepublic/autoform/refs/heads/acp-package/packages/shadcn/registry/autoform.jsonbunx --bun shadcn@latest add https://raw.githubusercontent.com/adityacodepublic/autoform/refs/heads/acp-package/packages/shadcn/registry/autoform.jsonUse import { AutoForm } from "@/components/ui/autoform" to import the component. By default, the registry will use the zod integration. If you want to use another schema library, simply update the /components/ui/autoform/utils.ts file.
Material UI
{
"@mui/material": "^6",
"@emotion/react": "^11",
"@emotion/styled": "^11"
}npm install @mui/material@^6 @emotion/react@^11 @emotion/styled@^11pnpm add @mui/material@^6 @emotion/react@^11 @emotion/styled@^11yarn add @mui/material@^6 @emotion/react@^11 @emotion/styled@^11bun add @mui/material@^6 @emotion/react@^11 @emotion/styled@^11npm install @acp-autoform/muipnpm add @acp-autoform/muiyarn add @acp-autoform/muibun add @acp-autoform/muiMantine
{
"@mantine/core": "^7",
"@mantine/dates": "^7"
}npm install @mantine/core@^7 @mantine/dates@^7pnpm add @mantine/core@^7 @mantine/dates@^7yarn add @mantine/core@^7 @mantine/dates@^7bun add @mantine/core@^7 @mantine/dates@^7npm install @acp-autoform/mantinepnpm add @acp-autoform/mantineyarn add @acp-autoform/mantinebun add @acp-autoform/mantineAnt Design
{
"antd": "^5"
}npm install antd@^5pnpm add antd@^5yarn add antd@^5bun add antd@^5npm install @acp-autoform/antpnpm add @acp-autoform/antyarn add @acp-autoform/antbun add @acp-autoform/antChakra UI
{
"@chakra-ui/react": "^3.8",
"@emotion/react": "^11.14"
}npm install @chakra-ui/react@^3.8 @emotion/react@^11.14pnpm add @chakra-ui/react@^3.8 @emotion/react@^11.14yarn add @chakra-ui/react@^3.8 @emotion/react@^11.14bun add @chakra-ui/react@^3.8 @emotion/react@^11.14npm install @acp-autoform/chakrapnpm add @acp-autoform/chakrayarn add @acp-autoform/chakrabun add @acp-autoform/chakraIf you want to integrate into your own UI components or another UI library, check out the custom integration guide.
In the docs, we will use Shadcn UI as an example but simply replace the imports with the ones from your UI library.
Install AutoForm's integration to your schema library
Zod
npm install @acp-autoform/zodpnpm add @acp-autoform/zodyarn add @acp-autoform/zodbun add @acp-autoform/zodYup
npm install @acp-autoform/yuppnpm add @acp-autoform/yupyarn add @acp-autoform/yupbun add @acp-autoform/yupJoi
npm install @acp-autoform/joipnpm add @acp-autoform/joiyarn add @acp-autoform/joibun add @acp-autoform/joiIn the docs, we will use Zod as an example but simply replace the imports with the ones from your schema library.
Create a form
import * as z from "zod";
import { AutoForm } from "@acp-autoform/mui";
import { ZodProvider } from "@acp-autoform/zod";
const mySchema = z.object({
name: z.string(),
age: z.coerce.number(),
});
const schemaProvider = new ZodProvider(mySchema);
function MyForm() {
return (
<AutoForm
schema={schemaProvider}
onSubmit={(data, form) => {
console.log(data);
}}
withSubmit
/>
);
}
export default MyForm;Next.js and RSC
AutoForm can only be used inside a client-side React component due to serialization of the schema. If you want to use it in a Next.js app, mark your component with "use client".
// MyPage.tsx
export default function MyPage() {
return (
<div>
<MyForm />
</div>
);
}
// MyForm.tsx
"use client";
import { AutoForm } from "@acp-autoform/mui";
export default function MyForm() {
return <AutoForm ... />;
}Submitting the form
You can use the withSubmit prop to automatically add a submit button to the form.
<AutoForm
// ...
withSubmit
/>Adding other elements
All children passed to the AutoForm component will be rendered below the form.
<AutoForm>
<p className="text-gray-500 text-sm">
By submitting this form, you agree to our{" "}
<a href="#" className="text-primary underline">
terms and conditions
</a>
.
</p>
</AutoForm>Accessing the form data and methods
AutoForm gives you several ways to access the form state and methods — via onSubmit, useFormContext, or an external formControl. See more.
Custom field components
When creating custom field components, you can use useController() from react-hook-form to register the field and access the field's methods and state. To learn more about creating custom fields, see customization.