🧩 app-form

A CLI for generating reusable, type-safe form components using React Hook Form, Zod, Tailwind CSS, and shadcn/ui.

✨ Features

• ✅ Built with react-hook-form and zod
• ✅ Uses Tailwind CSS + shadcn/ui components
• ✅ Reusable form fields: Input, Textarea, Select, Checkbox, Radio, Switch, Combobox, Multi-Select, Image Upload, and more
• ✅ One-by-one component installation (shadcn-style)
• ✅ Dependency-aware CLI (auto-installs internal deps)
• ✅ Clear warnings for required shadcn & external packages
• ✅ Works with Next.js App Router ("use client")

📖 Documentation, Setup & Examples

Full setup instructions and live, copy-paste examples for every field are on the website:

👉 app-form-client.vercel.app

Visit the site for the complete setup guide (peer dependencies, shadcn/ui configuration, schema setup) and runnable examples — basic forms, login forms, and advanced programmatic control with setValue, watch, getValues, and reset.

📦 Installation

npm install app-form

⚙️ CLI Usage

List available components

npx app-form list

Example output:

app-form
app-input-field
app-textarea
app-checkbox
app-checkbox-group
app-switch
app-radio-group
app-select-item
app-combobox
app-multi-select
app-file-uploader
app-input-field-array

Install a single component (recommended):

npx app-form add app-input-field

What this does:

• Installs app-form automatically if required
• Copies files into components/app-form/
• Lists the required shadcn/ui components for each field
• Warns about external dependencies (e.g. lucide-react)

Install all components:

npx app-form init

📁 Generated File Structure

Once initialized, you'll get:

All files are owned by your project and fully editable.

🔌 Peer Dependencies

You must already have these installed in your app:

npm install react react-dom react-hook-form zod @hookform/resolvers tailwindcss class-variance-authority

And make sure the required shadcn/ui components are generated. The CLI prints exactly which ones each field needs when you install it — see the setup guide for full details.

npx shadcn@latest add input label checkbox select

📄 License

ISC

Built by Md Aminul Islam (Rahat)