Settings screens

Profile, preferences, team, security and danger zones.

Settings is a screen shape, not a feature: a nav of sections, a form per section, and a save model that is either per-field autosave or an explicit bar — never both on the same page. These pick one and stay consistent, and the destructive section is separated and type-to-confirm, which is the one place friction is the feature.

15 matching8 blocks7 pagesFree to copy
Open the full page for this block

Profile Form With Save Bar

Avatar, fields and a character counter, with a sticky save bar that only appears once something has genuinely changed.

Settings220 lines1 dep
Open the full page for this block

Team Members & Invites

Member list with role selects, pending invites shown inline, and the last owner locked so a workspace cannot be orphaned.

Settings200 lines1 dep
Open the full page for this block

API Key Management

Masked keys, a create flow that reveals the secret exactly once, and a revoke that confirms before it fires.

Settings226 lines1 dep
Open the full page for this block

Grouped Settings Layout

Sidebar-and-panel settings shell that becomes a horizontal scroller on mobile instead of collapsing into a select.

Settings119 lines1 dep
Open the full page for this block

Danger Zone

Destructive actions gated by typing the resource name exactly — the pattern GitHub and Stripe use, and for good reason.

Settings184 lines1 dep
Open the full page for this block

Active Sessions & Devices

The screen people go looking for after losing a laptop. Sign out everywhere states what it does not reach — API keys keep working — locations are written as estimates, and this device is labelled rather than revocable by misclick.

Settings302 lines1 dep
Open the full page for this block

Notification Channel Matrix

Every event against every delivery channel in one grid, with column toggles and required rows that show the policy instead of a disabled checkbox.

Settings221 lines1 dep
Open the full page for this block

Audit Log

A compliance-grade trail with named actors, before and after values, IP addresses, and a stated retention window — plus a count of what the active filter is hiding.

Settings270 lines1 dep
Open the full page for this page

Billing & Usage Screen

Plan, quota meters and invoice history, with the upgrade prompt placed beside a bar that is nearly full rather than on the plan card.

Account & Billing5 blocks44 lines
Open the full page for this page

Team & Access

The admin screen a security questionnaire is really asking about — seats with the bill shown first, invitations, scopes split from bundles, sharing stated as its consequence, live sessions, and the audit trail underneath.

Account & Billing6 blocks61 lines
Open the full page for this page

Account Settings

Profile, team, API keys and danger zone in one screen — with the destructive panel last, well away from the everyday controls.

Account & Billing5 blocks39 lines
Open the full page for this page

Usage & Limits

Consumption in the order the questions arrive: the overage warning first because it is time-critical, then the meters, then what actually happens at each limit.

Account & Billing4 blocks66 lines
Open the full page for this page

Invoices

Billing history laid out for finance rather than for the user — a retrieval screen, so the table leads and the payment method comes last.

Account & Billing3 blocks41 lines
Open the full page for this page

Notification Settings

Notifications from the receiving end: the inbox you arrived from, per-event and per-channel control, and the push prompt asked after the decision rather than on arrival.

Account & Billing5 blocks59 lines

Questions about settings screens

Autosave or a save button?
Autosave for toggles, an explicit save for anything typed. A text field that saves as you type will save half a word to somebody's profile, and a toggle with a save button feels broken.
How much confirmation does a destructive action need?
Type the resource name for anything unrecoverable, a plain confirm for anything reversible. And say what happens to the data — "deleted immediately" and "kept for 30 days" are different promises.
Are these settings screens free to use?
All 15 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add settings-profile-form` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.
Why does this page mix components and whole pages?
Because the phrase does. The same search covers 8 section blocks and 7 composed pages — one of them is the right size for what you are building, and which one depends on how much of the screen you still have to write.