SettingsLayout

templates

Two-column settings layout — left vertical nav (Account, Organization, Billing, Security, Integrations), right content area. Used in /admin/settings.

ARIA Role: navigation (left)

Demo

Demo for SettingsLayout (templates)

Two-column settings layout — left vertical nav (Account, Organization, Billing, Security, Integrations), right content area. Used in /admin/settings.

Props

PropTypeRequiredDefaultDescription
sectionsSettingsSection[]Yes—3-8 sections
activeSectionstringYes—

TypeScript Interface

interface SettingsLayoutProps {
  sections: { id: string; label: string; icon: React.ReactNode; content: React.ReactNode }[];
  activeSection: string;
  onSectionChange: (id: string) => void;
}

Assertions (NASA Rule 5)

  • [type]sections bounded 3-8 (NASA Rule 2)(NASA Rule 2 + 5)
  • [aria]Left nav is <nav aria-label='Settings sections'> with aria-current='page'(WCAG 1.3.1)

Usage

Import

import { Settingslayout } from '@epasslive/design-system'

Basic

<Settingslayout />

With Variants

<Settingslayout variant="primary" size="md" />