Complete Your Profile

Full-height profile-setup step with a circular avatar preview and camera-icon overlay, a display-name text input, a bio textarea, and continue / skip actions.

By Staaarter Team

Auth

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/complete-your-profile.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth24.tsx instead.

Usage

The file also exports auth24Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Auth24, auth24Demo } from "@/components/blocks/auth/auth24";

export default function Page() {
  return <Auth24 {...auth24Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	none	Screen heading.
description	string	undefined	Short explanation shown under the heading.
displayNameLabel	string	none	Label for the display-name input.
displayNamePlaceholder	string	undefined	Placeholder text for the display-name input.
bioLabel	string	none	Label for the bio textarea.
bioPlaceholder	string	undefined	Placeholder text for the bio textarea.
continueLabel	string	none	Label for the continue button.
skipLabel	string	none	Label for the skip button.
className	string	none	Extra classes for the outer section element.

Behavior notes

This is a plain server component with no client-side state; the avatar upload slot is a purely decorative circular preview with a camera-icon overlay button, not wired to a real file input or upload.
Display name and bio are plain uncontrolled Input/Textarea fields with no client-side validation.
Continue and skip are rendered as inert buttons with no attached handlers, since submitting a profile requires a real backend.

More Auth Blocks

View all →

centered-sign-in-card

Centered Sign In Card

Full-height centered sign-in card with social buttons, a password show/hide toggle, and remember-me.

split-screen-sign-up

Split-Screen Sign Up

Two-column registration screen with a sign-up form on one side and a full-bleed photo with a customer quote on the other.

email-verification-code

Email Verification Code

Full-height OTP screen with a 6-digit segmented code input, auto-advancing focus, and a live resend countdown.

forgot-password-request

Forgot Password Request

Full-height password recovery screen with a single email field, a send-reset-link button, and a back-to-sign-in link.

set-new-password

Set New Password

Full-height reset-password screen with independent show/hide toggles per field and a live password-requirements checklist.

magic-link-sign-in

Magic Link Sign In

Full-height passwordless sign-in screen with an email field, a send-magic-link button, and social login as a fallback.