Settings Shell
Three column settings scaffold, icon rail, secondary nav with Danger zone, content column.
Three column settings scaffold, icon rail, secondary nav with Danger zone, content column.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Settings Shell is the three-column settings scaffold: the main nav collapsed to a 16 wide icon rail (Overview, Projects, Members, Billing, Settings active with bg-muted), a 56 wide secondary settings column with a Settings heading and four links (General active, Members, Billing, API), a divider, and then Danger zone in muted-foreground sitting visually apart. The content column narrows to max-w-3xl and opens on the General page: workspace name, time zone, and defaults for new projects as the subtitle, a Save changes button, and one dashed panel labelled Workspace profile where a settings form block slots in.
The rail and settings nav are separate arrays. The Danger zone sits outside the settings nav map, after a border-t divider, so it cannot be accidentally rendered between ordinary items.
Reach for this shell as the frame for all workspace settings pages. Wire the icon rail to your top-level router and the settings nav to the settings subroutes. The Danger zone link should confirm destructive intent before reaching the delete endpoint.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace general settings page. Other settings configurations:
Tip: the Danger zone earns its visual separation, a divider and muted color signal that what follows is irreversible before the user reads a single word.