Sign Up Form
A working sign up form with illustrative data and frontend interactions.
Make it yours.
Install the editable source and its dependencies into your React + Tailwind project.
Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/sign-up-form.jsonUse it
Scroll horizontally for long lines
"use client";
import {SignUpForm} from '@/components/jez-ui/blocks/sign-up-form';
export default function Example(){
return <><SignUpForm/></>;
}Props & types
Scroll horizontally for long lines
{
className?: string;
onSubmit?: (data: Record<string, string>) => Promise<void>;
}Source
View 6 source files
registry/blocks/sign-up-form.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "../ui/utils";
import { LockKeyhole } from "lucide-react";
import { PasswordInput } from "../ui/password-input";
import { Input } from "../ui/input";
import { FormField } from "../ui/form-field";
import { Button } from "../ui/button";
export function SignUpForm({
className,
onSubmit,
}: {
className?: string;
onSubmit?: (data: Record<string, string>) => Promise<void>;
}) {
const [status, setStatus] = React.useState("");
const [busy, setBusy] = React.useState(false);
return (
<form
className={cn(
"grid w-full max-w-md gap-5 rounded-2xl border border-border bg-background p-7 sm:p-9",
className,
)}
onSubmit={async (e) => {
e.preventDefault();
const data = Object.fromEntries(
new FormData(e.currentTarget),
) as Record<string, string>;
setBusy(true);
try {
await onSubmit?.(data);
setStatus(
onSubmit
? "Request complete."
: "Demo complete. No account or email was created.",
);
} catch {
setStatus("Unable to continue. Check your details and try again.");
} finally {
setBusy(false);
}
}}
>
<div className="mb-2">
<span className="mb-5 grid size-10 place-items-center rounded-xl border border-border bg-muted/30">
<LockKeyhole size={18} />
</span>
<h2 className="font-display text-2xl">Your next chapter.</h2>
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
Create an account and give your work a home.
</p>
</div>
<FormField label="Name">
<Input name="name" type="text" required autoComplete="name" />
</FormField>
<FormField label="Email">
<Input
name="email"
type="email"
required
autoComplete="email"
placeholder="you@company.com"
/>
</FormField>
<FormField label="Password" hint="Use at least 8 characters.">
<PasswordInput
name="password"
required
minLength={8}
autoComplete="new-password"
/>
</FormField>
<Button type="submit" loading={busy}>
Create account
</Button>
{status && (
<p role="status" className="text-sm">
{status}
</p>
)}
</form>
);
}
registry/ui/utils.ts
Scroll horizontally for long lines
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
return twMerge(clsx(values));
}
registry/ui/password-input.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { Eye, EyeOff, LockKeyhole } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Input } from "./input";
import { cn } from "./utils";
export function PasswordInput({
className,
...props
}: Omit<React.ComponentProps<typeof Input>, "type">) {
const [visible, setVisible] = React.useState(false);
const reduce = useReducedMotion();
return (
<div className={cn("group relative w-full", className)}>
<LockKeyhole
size={15}
className="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted-foreground transition-colors group-focus-within:text-primary"
/>
<Input
aria-label="Password"
autoComplete="current-password"
{...props}
type={visible ? "text" : "password"}
className="px-10"
/>
<button
type="button"
disabled={props.disabled}
aria-label={visible ? "Hide password" : "Show password"}
aria-pressed={visible}
onMouseDown={(e) => e.preventDefault()}
onClick={() => setVisible((v) => !v)}
className="absolute right-1 top-1 grid size-8 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
>
<AnimatePresence mode="wait" initial={false}>
<motion.span
key={String(visible)}
initial={{
opacity: 0,
rotate: reduce ? 0 : -35,
scale: reduce ? 1 : 0.7,
}}
animate={{ opacity: 1, rotate: 0, scale: 1 }}
exit={{
opacity: 0,
rotate: reduce ? 0 : 35,
scale: reduce ? 1 : 0.7,
}}
transition={{ duration: reduce ? 0 : 0.12 }}
>
{visible ? <EyeOff size={16} /> : <Eye size={16} />}
</motion.span>
</AnimatePresence>
</button>
</div>
);
}
registry/ui/input.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
export function Input({ className, ...props }: React.ComponentProps<"input">) {
return (
<input
className={cn(
"block h-10 w-full min-w-0 rounded-lg border border-border bg-background px-3 text-sm leading-normal shadow-[0_1px_2px_#00000004] transition-[border-color,box-shadow] placeholder:text-muted-foreground/75 hover:border-foreground/25 focus:border-primary focus:outline-none focus:ring-3 focus:ring-primary/10 aria-invalid:border-danger aria-invalid:ring-danger/10 disabled:cursor-not-allowed disabled:bg-muted/50 disabled:opacity-50",
className,
)}
{...props}
/>
);
}
registry/ui/form-field.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
export function FormField({
label,
hint,
error,
children,
className,
}: {
label: string;
hint?: string;
error?: string;
children: React.ReactElement<{
id?: string;
"aria-describedby"?: string;
"aria-invalid"?: boolean;
}>;
className?: string;
}) {
const id = React.useId();
return (
<div className={cn("grid gap-2", className)}>
<label htmlFor={id} className="text-sm font-medium">
{label}
</label>
{React.cloneElement(children, {
id,
"aria-describedby": hint || error ? id + "-help" : undefined,
"aria-invalid": !!error,
})}
{(hint || error) && (
<p
id={id + "-help"}
role={error ? "alert" : undefined}
className={cn(
"text-xs",
error ? "text-danger" : "text-muted-foreground",
)}
>
{error || hint}
</p>
)}
</div>
);
}
registry/ui/button.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { Slot } from "radix-ui";
import { LoaderCircle } from "lucide-react";
import { cn } from "./utils";
export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
size?: "sm" | "md" | "lg";
loading?: boolean;
asChild?: boolean;
};
export function Button({
variant = "primary",
size = "md",
loading,
asChild,
className,
children,
disabled,
...props
}: ButtonProps) {
const Comp = asChild ? Slot.Root : "button";
return (
<Comp
type={asChild ? undefined : "button"}
disabled={asChild ? undefined : disabled || loading}
aria-disabled={disabled || loading || undefined}
aria-busy={loading || undefined}
className={cn(
"relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-transparent text-sm font-medium leading-none transition-[background-color,border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:scale-[.98] disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none [&_svg]:shrink-0",
{
"bg-primary text-primary-foreground shadow-[inset_0_1px_0_#ffffff26,0_1px_2px_#00000012] hover:bg-primary/90":
variant === "primary",
"border-border/60 bg-muted text-foreground hover:bg-muted/70":
variant === "secondary",
"border-border bg-background text-foreground shadow-sm hover:bg-muted/60":
variant === "outline",
"text-muted-foreground hover:bg-muted hover:text-foreground":
variant === "ghost",
"bg-danger text-danger-foreground hover:bg-danger/90":
variant === "danger",
},
{
"h-8 px-3 text-xs": size === "sm",
"h-10 px-4": size === "md",
"h-12 px-6": size === "lg",
},
className,
)}
{...props}
>
{asChild ? (
children
) : (
<>
<span
className={cn(
"inline-flex min-w-0 flex-1 items-center justify-center gap-2",
loading && "invisible",
)}
>
{children}
</span>
{loading && (
<LoaderCircle
aria-hidden="true"
className="absolute size-4 animate-spin motion-reduce:animate-none"
/>
)}
</>
)}
</Comp>
);
}
Dependencies
lucide-react@0.577.0 · clsx@2.1.1 · tailwind-merge@3.5.0 · motion@13.2.0 · radix-ui@1.6.7
Accessibility & behaviour
Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.
Read the accessibility and performance guide →