SettingsShell

Attio's Settings layout: a 256px left nav with a back header, a search field that filters the nav, and grouped nav items (active row raised), beside a scrolling content pane. Fills whatever height its container gives it. Pair it with SettingsSection + FormField for the content, and EmptyState (variant="illustrated") for empty tabs.

Try it: switch nav items, and type in the search box to filter. The demo shows Profile (form), Members (a member table), and Developers (illustrated empty state).

Preview

Profile

Manage your personal details.

Changes to your profile will apply to all of your workspaces.

First name

Last name

Primary email addressUsed for sign-in and notifications.

Time preferences

Manage your time preferences

Preferred timezone

Start week on

Usage

import { SettingsShell } from "crisp";

<SettingsShell
  activeItem={active}
  onSelect={setActive}
  groups={[
    { label: "Personal", items: [{ id: "profile", label: "Profile", icon: <User /> }] },
    { label: "Workspace", items: [{ id: "members", label: "Members and teams", icon: <Users /> }] },
  ]}
>
  {panes[active]}
</SettingsShell>;

API

Prop	Type	Default	Description
`title`	`ReactNode`	`"Settings"`	Back-header title.
`onBack`	`() => void`	—	Fired by the back button.
`groups`	`SettingsNavGroup[]`	—	`{ label?, items: { id, label, icon? } }`.
`activeItem`	`string`	—	Selected nav id.
`onSelect`	`(id: string) => void`	—	Fired when a nav item is chosen.
`searchable`	`boolean`	`true`	Show the nav search filter.
`children`	`ReactNode`	—	The content pane.

Preview

Usage

API

On this page