# Progressive Sign Up Form – Fields Appear as You Go, No Steps

> Progressive Sign Up Form for React and Tailwind CSS (shadcn/ui): one card that starts with an email field and grows the next field only when the previous one is valid, with no step pages. The name slides in under a valid email, the password brings a four-segment strength meter that fills rule by rule, and the terms row arrives as the button morphs from Continue to Create account. Earlier fields stay editable. An async onSubmit fills the button, then the card morphs into a welcome state or offers Try again. Use it for SaaS onboarding and newsletter sign-ups. The demo types a sign-up, fails once and retries, with no requests. Requires React only.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Sign Up, Form, Authentication, Onboarding, Login Form
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/progressive-sign-up-form

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/progressive-sign-up-form?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/sign-up.md