Profile Form With Save Bar
Avatar, fields and a character counter, with a sticky save bar that only appears once something has genuinely changed.
Grouped Settings Layout
Sidebar-and-panel settings shell that becomes a horizontal scroller on mobile instead of collapsing into a select.
119 lineslucide-reactAdded 8 Aug 2026
- settings
- layout
- sidebar
- navigation
- preferences
What's included
components/settings-nav-layout.tsx- Needs lucide-react
Works with
- React
- Next.js
- Tailwind CSS
- TypeScript
npx hoverlab add settings-nav-layout
Or over MCP, from your editor's agent — no account needed.
License
Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.
Was this useful?
Start a page with this section — add more, order them, and leave with the page source.
Preview
Settings
Manage your account, your workspace and how you sign in.
Profile
The panel for “Profile” goes here. Pass it as children.
Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.
Source
components/settings-nav-layout.tsx
'use client'
/**
* <SettingsNavLayout> — the sidebar-and-panel shell for a settings area.
*
* The nav is a vertical list on desktop and a horizontal scroller on
* mobile, not a <select>. A native select is smaller, but it hides the
* available sections behind a tap and loses the current-page indicator —
* and settings is precisely where users are hunting for a section whose
* name they half-remember.
*
* Sections are grouped with a heading each, because a flat run of a dozen
* links is a wall. The grouping is data, so consumers can re-cut it.
*/
import * as React from 'react'
import { User, Bell, CreditCard, Users, KeyRound, Shield, Palette } from 'lucide-react'
export interface SettingsSection {
label: string
icon: React.ReactNode
group: string
}
export interface SettingsNavLayoutProps {
sections?: SettingsSection[]
initialSection?: string
heading?: string
children?: React.ReactNode
className?: string
}
const DEFAULT_SECTIONS: SettingsSection[] = [
{ label: 'Profile', icon: <User className="h-4 w-4" />, group: 'Account' },
{ label: 'Appearance', icon: <Palette className="h-4 w-4" />, group: 'Account' },
{ label: 'Notifications', icon: <Bell className="h-4 w-4" />, group: 'Account' },
{ label: 'Members', icon: <Users className="h-4 w-4" />, group: 'Workspace' },
{ label: 'Billing', icon: <CreditCard className="h-4 w-4" />, group: 'Workspace' },
{ label: 'API keys', icon: <KeyRound className="h-4 w-4" />, group: 'Developer' },
{ label: 'Security', icon: <Shield className="h-4 w-4" />, group: 'Developer' },
]
export function SettingsNavLayout({
sections = DEFAULT_SECTIONS,
initialSection = 'Profile',
heading = 'Settings',
children,
className = '',
}: SettingsNavLayoutProps) {
const [active, setActive] = React.useState(initialSection)
// Preserve the authored order of both groups and their items.
const groups = React.useMemo(() => {
const map = new Map<string, SettingsSection[]>()
for (const section of sections) {
const list = map.get(section.group)
if (list) list.push(section)
else map.set(section.group, [section])
}
return [...map.entries()]
}, [sections])
return (
<div className={`mx-auto w-full max-w-5xl p-6 ${className}`}>
<h1 className="text-2xl font-bold tracking-tight">{heading}</h1>
<p className="mt-1 text-sm text-muted-foreground">
Manage your account, your workspace and how you sign in.
</p>
<div className="mt-8 flex flex-col gap-8 lg:flex-row">
<nav aria-label="Settings sections" className="lg:w-52 lg:shrink-0">
{/* Horizontal scroller below lg, stacked groups above it. */}
<div className="flex gap-1 overflow-x-auto pb-2 lg:block lg:space-y-5 lg:overflow-visible lg:pb-0">
{groups.map(([group, items]) => (
<div key={group} className="contents lg:block">
<h2 className="hidden break-words px-3 pb-1.5 text-xs font-bold uppercase tracking-wider text-muted-foreground lg:block">
{group}
</h2>
{items.map((section) => {
const isActive = section.label === active
return (
<button
key={section.label}
type="button"
onClick={() => setActive(section.label)}
aria-current={isActive ? 'page' : undefined}
className={`flex shrink-0 items-center gap-2.5 break-words rounded-xl px-3 py-2 text-sm font-medium transition-colors lg:w-full ${
isActive
? 'bg-primary/10 text-primary'
: 'text-muted-foreground hover:bg-muted hover:text-foreground'
}`}
>
{section.icon}
<span className="min-w-0 flex-1 break-words text-start">{section.label}</span>
</button>
)
})}
</div>
))}
</div>
</nav>
<div className="min-w-0 flex-1">
{children ?? (
<div className="rounded-2xl border border-border/60 bg-card/60 p-6">
<h2 className="font-semibold tracking-tight">{active}</h2>
<p className="mt-1 text-sm text-muted-foreground">
The panel for “{active}” goes here. Pass it as{' '}
<code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">children</code>.
</p>
</div>
)}
</div>
</div>
</div>
)
}
Before you paste
- Styling is Tailwind utility classes on semantic tokens (
bg-card,text-muted-foreground) — it inherits your theme instead of overriding it. - Install: npm i lucide-react
- Every prop has a default, so it renders standalone before you wire it up.
Where it goes
Drop it at components/settings-nav-layout.tsx and import it where you need the section:
import { SettingsNavLayout } from '@/components/settings-nav-layout'Customize
2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.
Props
Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.
| Prop | Type | Default |
|---|---|---|
sections | SettingsSection[] | DEFAULT_SECTIONS |
initialSection | string | 'Profile' |
heading | string | 'Settings' |
children | React.ReactNode | — |
className | string | '' |
Not using React?
The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.
This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.
settings-nav-layout.html
<!--
Grouped Settings Layout — markup from the Hoverlab catalog.
This is the block rendered once to HTML and wrapped as a component
file. It is not a port of the React source: the Tailwind classes carry
the design, which is the part that took the work, and they are the same
in every framework.
This block is interactive in React and the handlers are NOT here.
Buttons, toggles and menus render in their initial state and do
nothing until you wire them up.
-->
<div class="mx-auto w-full max-w-5xl p-6 ">
<h1 class="text-2xl font-bold tracking-tight">Settings</h1>
<p class="mt-1 text-sm text-muted-foreground">Manage your account, your workspace and how you sign in.</p>
<div class="mt-8 flex flex-col gap-8 lg:flex-row">
<nav aria-label="Settings sections" class="lg:w-52 lg:shrink-0">
<div class="flex gap-1 overflow-x-auto pb-2 lg:block lg:space-y-5 lg:overflow-visible lg:pb-0">
<div class="contents lg:block">
<h2 class="hidden break-words px-3 pb-1.5 text-xs font-bold uppercase tracking-wider text-muted-foreground lg:block">Account</h2>
<button type="button" aria-current="page" class="flex shrink-0 items-center gap-2.5 break-words rounded-xl px-3 py-2 text-sm font-medium transition-colors lg:w-full bg-primary/10 text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user h-4 w-4" aria-hidden="true">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span class="min-w-0 flex-1 break-words text-start">Profile</span>
</button>
<button type="button" class="flex shrink-0 items-center gap-2.5 break-words rounded-xl px-3 py-2 text-sm font-medium transition-colors lg:w-full text-muted-foreground hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette h-4 w-4" aria-hidden="true">
<path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path>
<circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
<circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
<circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle>
<circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
</svg>
<span class="min-w-0 flex-1 break-words text-start">Appearance</span>
</button>
<button type="button" class="flex shrink-0 items-center gap-2.5 break-words rounded-xl px-3 py-2 text-sm font-medium transition-colors lg:w-full text-muted-foreground hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell h-4 w-4" aria-hidden="true">
<path d="M10.268 21a2 2 0 0 0 3.464 0"></path>
<path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path>
</svg>
<span class="min-w-0 flex-1 break-words text-start">Notifications</span>
</button>
</div>
<div class="contents lg:block">
<h2 class="hidden break-words px-3 pb-1.5 text-xs font-bold uppercase tracking-wider text-muted-foreground lg:block">Workspace</h2>
<button type="button" class="flex shrink-0 items-center gap-2.5 break-words rounded-xl px-3 py-2 text-sm font-medium transition-colors lg:w-full text-muted-foreground hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4" aria-hidden="true">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg>
<span class="min-w-0 flex-1 break-words text-start">Members</span>
</button>
<button type="button" class="flex shrink-0 items-center gap-2.5 break-words rounded-xl px-3 py-2 text-sm font-medium transition-colors lg:w-full text-muted-foreground hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card h-4 w-4" aria-hidden="true">
<rect width="20" height="14" x="2" y="5" rx="2"></rect>
<line x1="2" x2="22" y1="10" y2="10"></line>
</svg>
<span class="min-w-0 flex-1 break-words text-start">Billing</span>
</button>
</div>
<div class="contents lg:block">
<h2 class="hidden break-words px-3 pb-1.5 text-xs font-bold uppercase tracking-wider text-muted-foreground lg:block">Developer</h2>
<button type="button" class="flex shrink-0 items-center gap-2.5 break-words rounded-xl px-3 py-2 text-sm font-medium transition-colors lg:w-full text-muted-foreground hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round h-4 w-4" aria-hidden="true">
<path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path>
<circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle>
</svg>
<span class="min-w-0 flex-1 break-words text-start">API keys</span>
</button>
<button type="button" class="flex shrink-0 items-center gap-2.5 break-words rounded-xl px-3 py-2 text-sm font-medium transition-colors lg:w-full text-muted-foreground hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield h-4 w-4" aria-hidden="true">
<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
</svg>
<span class="min-w-0 flex-1 break-words text-start">Security</span>
</button>
</div>
</div>
</nav>
<div class="min-w-0 flex-1">
<div class="rounded-2xl border border-border/60 bg-card/60 p-6">
<h2 class="font-semibold tracking-tight">Profile</h2>
<p class="mt-1 text-sm text-muted-foreground">The panel for “Profile” goes here. Pass it as <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">children</code>.</p>
</div>
</div>
</div>
</div>
- This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
- It is one frame: the component in its initial state, with no props applied beyond the defaults.
- This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
- Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.
What each framework gets across the whole catalog — effects convert properly; this rung is markup.
For AI
The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.
See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
7 more blocks in Settings
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse SettingsShipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
- A commercial licence for everything in the catalog
- Unlimited bundle exports, in Vue, Svelte and Tailwind
- One payment — no subscription, nothing to renew
More Settings blocks
View categoryTeam Members & Invites
Member list with role selects, pending invites shown inline, and the last owner locked so a workspace cannot be orphaned.
API Key Management
Masked keys, a create flow that reveals the secret exactly once, and a revoke that confirms before it fires.
Danger Zone
Destructive actions gated by typing the resource name exactly — the pattern GitHub and Stripe use, and for good reason.
Active Sessions & Devices
The screen people go looking for after losing a laptop. Sign out everywhere states what it does not reach — API keys keep working — locations are written as estimates, and this device is labelled rather than revocable by misclick.
Notification Channel Matrix
Every event against every delivery channel in one grid, with column toggles and required rows that show the policy instead of a disabled checkbox.