# SignupFlow
URL: https://remocn.dev/docs/ui/blocks/signup-flow

A cursor-driven signup card — labeled fields fill top-to-bottom, then submit with success feedback

- Install: `npx shadcn@latest add @remocn/signup-flow`
- Vibe: clean
- Natural length: state-driven

A composition scene that renders a real shadcn-style signup card — header, labeled Full Name / Email / Password / Confirm Password fields, a primary "Create account" button, a "Sign up with Google" outline button, and a sign-in footer. The cursor fills each field top-to-bottom, then submits and receives a success confirmation via toast. Each step is driven by primitives orchestrated on a shared timeline.

## Installation

```bash
npx shadcn@latest add @remocn/signup-flow
```

> **Note**
>
> Installing `signup-flow` automatically installs the shared `remocn-ui` core and all composed primitives via `registryDependencies`: cursor, input, button, and toast. You do not need to install them separately.

## Composed primitives

- **Cursor** — animated pointer with click ripples
- **Input** — text reveal animation with active/typing states (one per field)
- **Button** — hover/press/loading/success progression (primary) and a static outline button
- **Toast** — success message auto-dismiss

The card chrome (surface, header, field labels, descriptions, and footer) is static layout drawn from the resolved theme. The card surface uses `theme.background` so the Input and Button atoms blend into it in both light and dark; the stage sits on `theme.muted` so the card lifts off the page via tone, border, and shadow.

## Timeline narrative

The scene opens with the cursor parked in the top-left. It clicks the Full Name field at frame 18 (the field focuses and types in), then Email at 52, Password at 96, and Confirm Password at 134 — each cursor-click frame matches that field's `active` frame, and each field's typed value reveals before the cursor moves on. At frame 176 the cursor reaches the Create account button (hover), which presses at 186, enters loading (spinner) at 192, and resolves to success at 234. Simultaneously at 234 the success toast slides in, auto-dismissing at 300.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Create an account"` | Card title. |
| `description` | `string` | `"Enter your information below to create your account"` | Card description under the title. |
| `fullName` | `string` | `"John Doe"` | Value typed into the Full Name field. |
| `email` | `string` | `"m@example.com"` | Value typed into the Email field. |
| `password` | `string` | `"••••••••"` | Masked value typed into the Password and Confirm fields. |
| `createLabel` | `string` | `"Create account"` | Primary submit button label. |
| `googleLabel` | `string` | `"Sign up with Google"` | Outline (social) button label. |
| `signinText` | `string` | `"Already have an account?"` | Footer prompt shown before the Sign in link. |
| `toastTitle` | `string` | `"Account created"` | Success message shown in the toast. |
| `theme` | `RemocnTheme` | — | Optional theme override (concrete oklch/hex/rgb values). |

## Use when
- Showing a full onboarding or signup flow in a product launch or demo video.
- Demonstrating a realistic form-fill interaction with animated cursor and field progression.
- You need a production-ready auth scene with zero assembly and the default field layout fits.

## Don't use when
- You need a generic form with custom fields — compose `input` + `button` + `cursor` manually instead.
- You only need the success notification — use `toast` directly.
- You need a settings interaction walkthrough — use `settings-toggle-flow` instead.