---
name: "@formcn"
slug: "formcn"
description: "A shadcn/ui-based form builder that generates production-ready single-step and multi-step form code without AI inconsistency. Outputs React components using shadcn primitives, Zod validation (client and server), and Tailwind CSS. Includes Formcn AI scaffolding to auto-generate field configurations, support for stepper, tag-input, and standard form controls, plus a one-command shadcn registry install. Free and open-source. Use for: rapidly scaffolding validated, accessible forms in Next.js projects without hand-writing repetitive form boilerplate."
category: "Forms"
tags: ["accessibility", "ai", "design-system", "forms", "hooks", "media", "navigation"]
framework: "react"
license: null
author: "Ali-Hussein-dev"
website: "https://formcn.dev"
github: "https://github.com/Ali-Hussein-dev/formcn"
registry: "https://formcn.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 491
component_count: 9
generated_at: "2026-07-28T08:00:50.948Z"
---

# @formcn

A shadcn/ui-based form builder that generates production-ready single-step and multi-step form code without AI inconsistency. Outputs React components using shadcn primitives, Zod validation (client and server), and Tailwind CSS. Includes Formcn AI scaffolding to auto-generate field configurations, support for stepper, tag-input, and standard form controls, plus a one-command shadcn registry install. Free and open-source. Use for: rapidly scaffolding validated, accessible forms in Next.js projects without hand-writing repetitive form boilerplate.

## Links

- Website: https://formcn.dev
- GitHub: https://github.com/Ali-Hussein-dev/formcn
- Registry JSON: https://formcn.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/formcn
- This file: https://sh4dcn.vercel.app/md/formcn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://formcn.dev/r/registry.json
pnpm dlx shadcn@latest add https://formcn.dev/r/registry.json
bunx shadcn@latest add https://formcn.dev/r/registry.json
# clone the source repo
git clone https://github.com/Ali-Hussein-dev/formcn.git
# fetch the raw registry index
curl -s https://formcn.dev/r/registry.json
```

## Components (9)

| name | type | description | install |
| --- | --- | --- | --- |
| tag-input | registry:component | Tag input component | `npx shadcn@latest add https://formcn.dev/r/tag-input.json` |
| password | registry:component | Password input with show/hide toggle | `npx shadcn@latest add https://formcn.dev/r/password.json` |
| multi-select | registry:component | Multi-select dropdown | `npx shadcn@latest add https://formcn.dev/r/multi-select.json` |
| rating | registry:component | Rating component | `npx shadcn@latest add https://formcn.dev/r/rating.json` |
| file-upload | registry:component | File upload component | `npx shadcn@latest add https://formcn.dev/r/file-upload.json` |
| use-file-upload | registry:hook | state management hook for file upload component | `npx shadcn@latest add https://formcn.dev/r/use-file-upload.json` |
| use-multi-step-viewer | registry:hook | Multi-step viewer hook | `npx shadcn@latest add https://formcn.dev/r/use-multi-step-viewer.json` |
| multi-step-viewer | registry:component | Multi-step form | `npx shadcn@latest add https://formcn.dev/r/multi-step-viewer.json` |
| stepper | registry:component | Stepper component | `npx shadcn@latest add https://formcn.dev/r/stepper.json` |

## For AI agents

```text
You are adding components from @formcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/formcn.md) for the component list.
2. Fetch the machine-readable index: https://formcn.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: formcn).
```