SettingsModal

SettingsModal is the in-call preferences surface — three default tabs (Audio, Video, Display) with device pickers, the noise-suppression toggle, and a placeholder for display preferences. Controlled (open + onOpenChange) so the host app owns visibility.

Install

pnpm add @levelchat/react-components @levelchat/web

Requirements

• React — react and react-dom ^18 || ^19 (peer dependency).
• LevelChat Web SDK — @levelchat/web ^0.2.4 (peer dependency, wires hook-driven mode to the live Room).
• Provider — wrap the tree in <LevelChatProvider> from @levelchat/web-react so hook-driven mode can subscribe to room events. Prop-driven demos work without it.
• Styles — import the brand tokens + kit stylesheet exactly once at the app entry, before any kit component renders.

In Next.js (App Router), import the stylesheets at the top of your root layout:

// app/layout.tsx
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

In Vite (or any plain React app), import them at the top of your entry module:

// src/main.tsx
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

Basic usage

import { SettingsModal } from '@levelchat/react-components';

const [open, setOpen] = useState(false);

<SettingsModal open={open} onOpenChange={setOpen} />

Custom tabs

Pass a tabs array to replace or extend the defaults:

<SettingsModal
  open={open}
  onOpenChange={setOpen}
  tabs={[
    { id: 'audio',     label: 'Audio',     render: (s) => <AudioPrefs state={s} /> },
    { id: 'captions',  label: 'Captions',  render: () => <CaptionsPrefs /> },
    { id: 'shortcuts', label: 'Shortcuts', render: () => <KeyboardPrefs /> },
  ]}
/>

Accessibility

• role="dialog" + aria-modal="true".
• First tab focused on open; focus restored to the trigger on close.
• ESC closes; backdrop click closes; content click never propagates.
• role="tablist" + role="tab" + role="tabpanel" for the section nav.

Props