Settings Blocks

A settings page with grouped preference rows and toggles.

A compact centered Profile card with an avatar upload section, vertical form fields (name, email, job title), a two-factor authentication Switch, and Discard/Save actions in the card footer.

Tabbed settings page with Account profile fields and switch, Billing plan and payment card, and a Team members table

A settings layout with a left section nav (Profile, Account, Notifications, Billing) that swaps the active section's cards.

Pro settings: a settings shell with a vertical section nav (My Profile, Security, Notifications, Billing, Appearance) whose active item tracks a sliding indicator; selecting a section blur cross-fades the panel; a dismissable Complete-Your-Profile callout with a count-up completion meter, scroll-in blur-rise.

Pro settings: an appearance studio with a live preview. Theme, accent color, and interface-density controls re-theme a self-contained mock-app preview island in real time (scoped CSS variables, blur cross-fade on change), plus a reduce-motion switch; scroll-in blur-rise.

Pro settings: a profile editor with a live public-profile preview. Editing name, username, role, bio, location, and social links updates a preview card in real time (avatar, handle, role, location, bio, social icons) so you see how the public profile appears; scroll-in blur-rise, text-left form / content-right preview split.

Pro settings: a security and access page with a session-policy card (enforce 2FA, session timeout, single active session), login methods (password, magic link, SAML SSO gated to Enterprise), and an active-sessions list where Revoke animates the row out; count-up security score, scroll-in blur-rise.

Pro settings: a profile editor with an editorial grayscale cover photo and overlapping avatar, an animated drag-and-drop upload zone (idle, hover, and drop states), an About field with a markdown hint, and regional preferences; poster layout, scroll-in blur-rise.

Pro settings: a dense general-settings sheet of hairline two-column rows (project name, required API endpoint, start of week, allowed origins with animated add/remove, region and currency, date format, editor preferences) with a sticky Unsaved Changes save bar that blur-rises in when the form is dirty and counts the changes; scroll-in blur-rise.

Pro settings: a notification preferences matrix of events by Email, Push, and SMS switches with per-column master toggles that cascade the whole channel, plus a quiet-hours time range; staggered row blur-rise.

Pro settings: a plan and billing page with a current-plan card, usage meters (seats, storage, API calls) that fill on scroll with count-up values, a payment-method row, and an invoice-history table; scroll-in blur-rise.