Build a settings area
Settings is where a product accumulates screens without anyone deciding to build them. These five cover almost every real account area, and the layout comes first so the rest just drop in.
Take all 5 at once
npx hoverlab add settings-nav-layout settings-profile-form settings-team-members settings-api-keys settings-danger-zoneOr through the shadcn CLI, with nothing installed first:
npx shadcn@latest add https://hoverlab5.netlify.app/r/path-settings.jsonThis path is a published registry item — one name that pulls in all 5 blocks. Or work down the list and copy each one from its page; the order is what matters, not how the files get there.
- 1
The sidebar and content split that every following step sits inside. Build it first and each new settings screen is a panel rather than a page.
- 2
Name, avatar, email. The screen people came for, so it is the one the nav lands on by default.
- 3
Invites, roles and removal. The moment a product goes from one user to an account, this is the screen that has to exist.
- 4
Create, copy once, revoke. Note that the key is shown a single time — that is the behaviour, not an oversight.
- 5
Delete the account, leave the team, close the workspace. Last, visually separated, and behind a confirm — which is exactly why it is a section of its own rather than a red button next to Save.
When you are done
Add billing as a sixth panel in the same layout — the billing path picks up from here.