---
name: "@formscn"
slug: "formscn"
description: "Production-ready shadcn/ui forms visually with drag-and-drop."
category: "Forms"
tags: ["auth", "buttons", "cards", "e-commerce", "forms", "loaders", "marketing", "onboarding", "overlays"]
framework: "react"
license: null
author: "AbdullahMukadam"
website: "https://www.formscn.space"
github: "https://github.com/AbdullahMukadam/formscn"
registry: "https://www.formscn.space/r/registry.json"
pro: false
pro_url: null
github_stars: 72
component_count: 30
generated_at: "2026-09-21T01:50:16.753Z"
---

# @formscn

Production-ready shadcn/ui forms visually with drag-and-drop.

## Links

- Website: https://www.formscn.space
- GitHub: https://github.com/AbdullahMukadam/formscn
- Registry JSON: https://www.formscn.space/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/formscn
- This file: https://sh4dcn.vercel.app/md/formscn.md

## Install

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

## Components (30)

| name | type | description | install |
| --- | --- | --- | --- |
| base-form | registry:block | Base form dependencies | `npx shadcn@latest add https://www.formscn.space/r/base-form.json` |
| button | registry:ui | Button component | `npx shadcn@latest add https://www.formscn.space/r/button.json` |
| card | registry:ui | Card component | `npx shadcn@latest add https://www.formscn.space/r/card.json` |
| input | registry:ui | Input component | `npx shadcn@latest add https://www.formscn.space/r/input.json` |
| switch | registry:ui | Switch component | `npx shadcn@latest add https://www.formscn.space/r/switch.json` |
| textarea | registry:ui | Textarea component | `npx shadcn@latest add https://www.formscn.space/r/textarea.json` |
| label | registry:ui | Label component | `npx shadcn@latest add https://www.formscn.space/r/label.json` |
| select | registry:ui | Select component | `npx shadcn@latest add https://www.formscn.space/r/select.json` |
| checkbox | registry:ui | Checkbox component | `npx shadcn@latest add https://www.formscn.space/r/checkbox.json` |
| radio-group | registry:ui | Radio Group component | `npx shadcn@latest add https://www.formscn.space/r/radio-group.json` |
| phone-input | registry:ui | Phone input component with country selection | `npx shadcn@latest add https://www.formscn.space/r/phone-input.json` |
| field | registry:ui | Field components for TanStack Form (Field, FieldLabel, FieldError, FieldDescription) | `npx shadcn@latest add https://www.formscn.space/r/field.json` |
| popover | registry:ui | Popover component | `npx shadcn@latest add https://www.formscn.space/r/popover.json` |
| calendar | registry:ui | Calendar component | `npx shadcn@latest add https://www.formscn.space/r/calendar.json` |
| progress | registry:ui | Progress component | `npx shadcn@latest add https://www.formscn.space/r/progress.json` |
| auth-client | registry:lib | Better Auth React client utilities | `npx shadcn@latest add https://www.formscn.space/r/auth-client.json` |
| login-form | registry:block | Simple email and password login form | `npx shadcn@latest add https://www.formscn.space/r/login-form.json` |
| signup-form | registry:block | User registration form with email and password | `npx shadcn@latest add https://www.formscn.space/r/signup-form.json` |
| contact-form | registry:block | Contact form with name, email, subject, and message | `npx shadcn@latest add https://www.formscn.space/r/contact-form.json` |
| newsletter-form | registry:block | Newsletter subscription form with email frequency selection | `npx shadcn@latest add https://www.formscn.space/r/newsletter-form.json` |
| job-application-form | registry:block | Job application form with resume and cover letter | `npx shadcn@latest add https://www.formscn.space/r/job-application-form.json` |
| feedback-form | registry:block | Product feedback form with rating and comments | `npx shadcn@latest add https://www.formscn.space/r/feedback-form.json` |
| event-registration-form | registry:block | Event registration form with attendee details | `npx shadcn@latest add https://www.formscn.space/r/event-registration-form.json` |
| waitlist-form | registry:block | Waitlist signup form | `npx shadcn@latest add https://www.formscn.space/r/waitlist-form.json` |
| support-ticket-form | registry:block | Support ticket submission form | `npx shadcn@latest add https://www.formscn.space/r/support-ticket-form.json` |
| booking-request-form | registry:block | Booking request form with date and service selection | `npx shadcn@latest add https://www.formscn.space/r/booking-request-form.json` |
| ecommerce-checkout-form | registry:block | Checkout form with shipping and payment details | `npx shadcn@latest add https://www.formscn.space/r/ecommerce-checkout-form.json` |
| onboarding-wizard-form | registry:block | Multi-step user onboarding wizard | `npx shadcn@latest add https://www.formscn.space/r/onboarding-wizard-form.json` |
| detailed-application-form | registry:block | Multi-step detailed application form | `npx shadcn@latest add https://www.formscn.space/r/detailed-application-form.json` |
| form-generator | registry:lib | Form code generation utilities | `npx shadcn@latest add https://www.formscn.space/r/form-generator.json` |

## For AI agents

```text
You are adding components from @formscn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/formscn.md) for the component list.
2. Fetch the machine-readable index: https://www.formscn.space/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: formscn).
```