Settings pagePro
Account settings with a gliding section nav and a save bar that morphs in as you edit.
Profile
How you appear to teammates across Northwind.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { SettingsPage } from 'animui/settings-page';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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.
import { SettingsPage } from "animui/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 animui 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 animui input, select, switch, segmented-control, avatar, animated-counter, text-morph, and button.
The full library index for assistants is at /llms.txt.