Settings tab pattern with atomic load.
Tabbed settings panel that loads all tab data atomically (one fetch, all tabs hydrated). Each tab is a self-contained section with its own save button. Use for Profile / Org / Billing / API Keys layouts.
import { SettingsPanel } from "@/components/ui/settings-panel";
<SettingsPanel
loader={() => fetchAllSettings()}
tabs={[
{ value: "profile", label: "Profile", render: (data) => <Profile data={data} /> },
{ value: "billing", label: "Billing", render: (data) => <Billing data={data} /> },
]}
/>components/ui/ folder. You own the code.