Manicat UI

Sign up form

An account creation flow with field validation, password strength, and a clear completion state.

Preview
Sign up form preview

Create your account

Start with your work email. You can invite your team after.

or
Use 8 or more characters.

By creating an account you agree to the and .

Have an account?

shadcn CLI

Also installs (5)

  • manicat-foundation
  • button
  • checkbox
  • input
  • password-field
Manual install(+)
registry.jsonjson
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "signup-form",
  "type": "registry:block",
  "title": "Sign up form",
  "description": "An account creation flow with field validation, password strength, and a clear completion state.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "@radix-ui/react-checkbox",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json",
    "https://manicat.viraza.net/r/button.json",
    "https://manicat.viraza.net/r/checkbox.json",
    "https://manicat.viraza.net/r/input.json",
    "https://manicat.viraza.net/r/password-field.json"
  ],
  "files": [
    {
      "path": "registry/blocks/signup-form/signup-form.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/signup-form/signup-form.tsx"
    },
    {
      "path": "registry/blocks/signup-form/signup-form.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/signup-form/signup-form.module.css"
    },
    {
      "path": "registry/components/password-field/password-field.tsx",
      "type": "registry:component",
      "target": "@components/manicat/password-field/password-field.tsx"
    },
    {
      "path": "registry/components/password-field/password-field.module.css",
      "type": "registry:component",
      "target": "@components/manicat/password-field/password-field.module.css"
    },
    {
      "path": "registry/components/input/input.tsx",
      "type": "registry:component",
      "target": "@components/manicat/input/input.tsx"
    },
    {
      "path": "registry/components/input/input.module.css",
      "type": "registry:component",
      "target": "@components/manicat/input/input.module.css"
    },
    {
      "path": "registry/components/checkbox/checkbox.tsx",
      "type": "registry:component",
      "target": "@components/manicat/checkbox/checkbox.tsx"
    },
    {
      "path": "registry/components/checkbox/checkbox.module.css",
      "type": "registry:component",
      "target": "@components/manicat/checkbox/checkbox.module.css"
    },
    {
      "path": "registry/components/button/button.tsx",
      "type": "registry:component",
      "target": "@components/manicat/button/button.tsx"
    },
    {
      "path": "registry/components/button/button.module.css",
      "type": "registry:component",
      "target": "@components/manicat/button/button.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/signup-form",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/signup-form",
    "markdown": "https://uiarc.dev/components/blocks/signup-form/markdown"
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx
"use client";

import { SignupForm } from "manicat/registry/blocks/signup-form/signup-form";

export function SignupFormExample() {
  return <SignupForm />;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Create account Handle the submit yourself; surface a server error and react to the social providers.

Create account Handle the submit yourself; surface a server error and react to the social providers. preview

Create your account

Start with your work email. You can invite your team after.

or
Use 8 or more characters.

By creating an account you agree to the and .

Have an account?