The other half of an app: not a record view but a settings surface — a grouped left nav beside a scrolling form pane. Where the Companies page shows the data primitives, this shows the form ones. Click through Profile / Appearance / Notifications / Members; every control is live.

Composition

Each section is a plain form composed from shipped primitives:

• Profile — Avatar + Button for the picture, Input for name and email, and a searchable Select for timezone.
• Appearance — the Radio Group card variant for the Light / Dark / System theme picker, plus an accent-colour swatch row.
• Notifications — a stack of labelled Switch rows.
• Members — an Avatar + role Select per member.

The settings layout

The pattern is the same every time: a fixed-width nav (grouped by Personal / Workspace, 32px rows) that swaps the right pane, and a right pane with a bordered header (section name + Help) over a scrolling, max-width form column. Sections are just components keyed off the active nav id:

const SECTIONS = {
  profile: ProfileSection,
  appearance: AppearanceSection,
  notifications: NotificationsSection,
  members: MembersSection,
};

const Section = SECTIONS[active];
// …nav on the left sets `active`; <Section /> renders on the right.