defuss-shadcn / Website / website-account-states
Account & States
Blocks for accounts and the moments around them: sign in, providers, sign up and password resets, profiles and settings, support, feedback and surveys and form progress - and the states every product needs: empty, error, success, coming soon, maintenance and 404. Every block is CSS-only and built from the library's components and tokens.
On this page (3)
§The template
The Account & States blocks composed into one page - the source is the page.
§An account area
A split Login Form with Social Login, a Profile Header, Security and Notification Settings, a survey step with Form Progress, empty / error / success states - only Account & States blocks.
§The blocks
Login Form
Authenticates a user with account credentials - email, password, "remember me" and a reset link, on a card, beside a picture, or plain.
Social Login
Provides authentication through external identity providers - Google, Apple, GitHub, Microsoft - as full-width buttons, an icon row, with a divider to the email form.
Signup Form
Collects the information needed to create an account - name, email, a new password with its rules, consent - on a card or beside the benefits.
Reset Request
Requests a password-reset link for an account - the email field, then the "check your inbox" state with a way to resend.
Password Reset
Collects and confirms a replacement password - the new password with its rules, the confirmation, and the done state.
Profile Header
Presents a user's avatar, identity, biography, and relevant actions - a cover, an overlapping avatar, name and handle, bio, details, counts and follow / message.
Profile Form
Edits a user's personal information - photo, name, username, bio, website and time zone - as settings rows with a description beside each group.
Security Settings
Manages passwords, authentication methods, and active sessions - the password, two-factor methods, passkeys and every signed-in device.
Notification Settings
Controls notification topics and delivery channels - a matrix of topics by channel, or a list of switches with a digest frequency.
Support Form
Collects an issue description and supporting attachments - topic, subject, description, priority and files, beside the expected response time and self-help links.
Feedback Form
Collects a rating or written feedback about an experience - faces and topics on a card, a 0–10 recommendation scale, or "was this helpful?" inline.
Survey Question
Presents one question with its response controls - a single choice as cards, several choices, an agreement scale, or a written answer.
Form Progress
Shows the current stage and remaining steps of a form - a bar with the step names, numbered steps, segments or one compact line.
Empty State
Explains missing content and offers an appropriate next action - an icon, why it is empty, and the first step; on a dashed area or inline in a list.
Error State
Explains a failure and provides recovery actions - what went wrong in plain words, what to do, and the technical details on request.
Success State
Confirms a completed action and offers relevant next steps - a check with a ripple, what happened, and where to go from here.
Coming Soon
Announces an upcoming launch and its expected availability - the date, a live rolling countdown, a notify-me form and where to follow along.
Maintenance
Explains temporary unavailability and provides status information - what is happening, when it ends, and where to follow; or a banner announcing it.
404 Page
Tells visitors the page does not exist and helps them on - a big 404, a search, the most useful links and the way home.
Comments, ideas or improvements? Edit this page's source on GitHub