SettingsShell

A Settings layout: a 275px left nav with a back header, a search field that filters the nav, and grouped nav items (the active row carries the same faint 4% primary-text tint as the active NavItem, crisp#1219), 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.

Its chrome is measured from a live Settings page, but nav items and content are yours — use it directly as the shell for any settings surface.

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).

Installation

npm install @crisp-ui-kit/crisp

Header and content width

header renders a 49px bar (bottom hairline) over the content column only, so the nav keeps the full height beside it — put a breadcrumb on the left and Help on the right. contentWidth (number = px, or any CSS width) centres the content in a column of that width, 72px below the header, as Attio's Settings pages do (768 on Notifications). Both are optional; without them the pane is full-width as before.

The header wrapper pads 12px a side, which is where Attio's breadcrumb list starts (measured on Settings at 1440 wide: the content column begins at x=275, the first segment at x=287, its icon at 291 inside the chip's 4px padding). A HeaderBar passed as header already pads itself 12px, so the wrapper adds nothing for it; before carrot-systems/crisp#1158 the two stacked and the first segment landed 16px right of Attio's.

Usage

import { SettingsShell } from "@crisp-ui-kit/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>;

Props