Settings pagePro
Account settings with a gliding section nav and a save bar that morphs in as you edit.
Live block · sample data
Profile
How you appear to teammates across Northwind.
Emma CollinsProduct designer · Northwind Studio
Used for sign-in and notifications.
- Account or workspace settings with several sections.
- Forms that should show a save bar only when something changed.
- Settings where Cmd or Ctrl+S should save.
- Use security-settings for sessions, two factor, and passwords.
- Use billing-overview for plan and invoice management.
- Use team-members for inviting and managing people.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this for account or workspace settings. Load values from your user API, send the changed fields on save, and upload the photo file to your storage; saving in the preview is simulated.
example.tsx
import { SettingsPage } from "@/registry/blocks/settings-page/settings-page"; export default function AccountSettings() { return ( <main> <SettingsPage /> </main> );}SettingsPage
Account settings with profile, notifications, security, and billing sections, a gliding section nav, and a save bar that appears when fields change. Values and saving are simulated.
No props.
- Arrow keys
- Move between sections in the section nav.
- HomeorEnd
- Jump to the first or last section.
- Cmd/Ctrl+S
- Saves pending changes.
- The root is a labelled section, and the section nav supports roving arrow key focus.
- Form fields use Arc input, select, and switch with visible labels.
- The save bar counts changed fields and announces saves and reverts.
- The active section indicator glides between nav items.
- The save bar morphs in as you edit and its changed count rolls.
- Reduced motion removes the glide and morph.
- Below 720px container width the section nav becomes a horizontal scrolling row above the form and fields drop to one column.
- Below 460px and 360px the save bar hides secondary text and the profile header stacks.
- The form scrolls inside a fixed-height pane; a ResizeObserver keeps the nav indicator aligned.
- Only the save bar count and indicator animate; fields are plain controlled inputs.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for account or workspace settings.
- Replace the initial values with data from your user API, send only changed fields on save, and upload the photo file to your storage.
- Composes Arc input, select, switch, segmented-control, avatar, animated-counter, text-morph, and button.
The full library index for assistants is at /llms.txt.