FORMS · BLOCK
Create account
A complete registration form, with password guidance and clear feedback.
The preview couldn’t load. Try Reset preview, or open Code to use the example.
Loading the real component…
"use client";
import { useState } from "react";
import { CreateAccountBlock, type CreateAccountStatus } from "@raydenui/ui/blocks";
import "@raydenui/ui/styles.css";
export default function Example({ state = "default" }: { state?: string }) {
const [submitted, setSubmitted] = useState(false);
return <div style={{ width: "min(100%, 600px)" }}><CreateAccountBlock title="Make room for your ideas." description="Try the registration flow with example details. Nothing is sent." defaultValues={{ firstName: "Avery", lastName: "Morgan", email: "avery@example.com" }} consentLabel="I understand this is a local demonstration." onSubmit={() => setSubmitted(true)} status={submitted ? "success" : state === "default" ? "idle" : state as CreateAccountStatus} successMessage="Demo completed. No account was created and no details were sent." errorMessage="Example error: registration is temporarily unavailable." submitLabel="Try creating an account" /></div>;
}
Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.
Made for real interfaces.
A registration interface with local validation, password confirmation, consent and explicit submission states. The preview never sends personal details or creates an account.
Try it
Use example details, enter matching passwords, tick the demo consent, and submit. Compare loading, submitting and error states.