About this block

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.

When to use

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

• Nothing, shells are the page

After

• Settings pages
• Users table

What you can display

One strong use is the workspace general settings page. Other settings configurations:

• Members settings. Secondary nav lands on Members, content carries the users table and invite form.
• Billing settings. Secondary nav lands on Billing, content carries the plan card and invoice list.
• API settings. Secondary nav lands on API, content carries the key list and scope table.

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.