Anchored Settings Shell

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<AnchoredSettingsShell />

Installation

npx shadcn@latest add https://webberui.com/r/anchored-settings-shell.json

Usage

import {
  AnchoredSettingsShell,
  SettingsSection,
  SettingsRow,
} from "@/components/ui/anchored-settings-shell";
import { Bell, User } from "lucide-react";

export function Example() {
  const [dirty, setDirty] = React.useState(false);

  return (
    <AnchoredSettingsShell
      dirty={dirty}
      onSave={() => setDirty(false)}
      onDiscard={() => setDirty(false)}
    >
      <SettingsSection id="profile" label="Profile" icon={User} description="Public identity and contact details">
        <SettingsRow label="Display name" htmlFor="name">
          <input id="name" onChange={() => setDirty(true)} />
        </SettingsRow>
      </SettingsSection>

      <SettingsSection id="notifications" label="Notifications" icon={Bell}>
        <SettingsRow label="Product updates">{/* ...control */}</SettingsRow>
      </SettingsSection>
    </AnchoredSettingsShell>
  );
}

The navigation items are derived automatically from the id, label, and icon of the SettingsSection children, so their order always matches the content.

Uncontrolled mode

Omit the dirty prop to use internal state instead: call the function returned by useSettingsDirty() in a form field's onChange to mark unsaved changes. It resets automatically after onSave / onDiscard.

import { useSettingsDirty } from "@/components/ui/anchored-settings-shell";

function NameField() {
  const markDirty = useSettingsDirty();
  return <input onChange={markDirty} />;
}

Scroll container

If the settings page lives inside a nested overflow-y-auto container, pass that container's ref to container and scroll-spy will use it as the scroll root. When omitted, the window is the scroll container.

Props

AnchoredSettingsShell

SettingsSection

SettingsRow

How it works

• The navigation indicator's top / height are driven by useSpring, so it slides continuously between nav items as you change sections.
• Scroll-spy samples each section's visible ratio with an IntersectionObserver and picks the most visible one as the current section; both the window and a nested container work as the scroll root.
• When there are unsaved changes, the save bar at the bottom springs in; sticky bottom positioning keeps it flush with the bottom of the scroll viewport.

Accessibility

• The navigation is a <nav> with anchor links, and the current section is marked aria-current="location"; clicking smooth-scrolls to the matching section.
• While there are unsaved changes, ⌘/Ctrl+S triggers a save.
• While saving, the buttons are disabled and a spinner is shown, preventing double submission.
• With "reduce motion" enabled, the indicator and save bar position instantly and scrolling becomes auto, with no effect on layout or functionality.
• Each section is tied to its heading with aria-labelledby, and toggle switches use role="switch" with aria-checked.