Settings Block

Settings is a settings menu layout built on MUI, with clickable rows for account and preference actions.

Installation

npm

npm install @nodeblocks/frontend-settings-block

yarn

yarn add @nodeblocks/frontend-settings-block

pnpm

pnpm add @nodeblocks/frontend-settings-block

bun

bun add @nodeblocks/frontend-settings-block

What You Need

Item	Why it matters
settingsTitle	Heading shown in the title block and passed through context
items	Rows to render (icon, title, optional value, click handler)
children (optional)	BlocksOverride | ReactNode

Each item in items supports:

Field	Type	Required	Description
icon	SvgIconComponent	Yes	MUI icon component shown on the left of the row
title	string	Yes	Primary row label
value	string	No	Secondary text shown under the title
onClick	() => void	Yes	Called when the row is clicked

Provide MUI icons

Pass icon components from @mui/icons-material (for example, PersonOutlined).

Code Examples

Quick Start

Live Editor

function Example() {
  const [lastEvent, setLastEvent] = React.useState('Ready');
  const items = [
    {
      icon: PersonOutlined,
      title: 'Username',
      value: 'johndoe',
      onClick: () => setLastEvent('Username clicked'),
    },
    {
      icon: EmailOutlined,
      title: 'Email',
      value: 'john.doe@example.com',
      onClick: () => setLastEvent('Email clicked'),
    },
    {
      icon: LockOutlined,
      title: 'Password',
      value: '••••••••',
      onClick: () => setLastEvent('Password clicked'),
    },
  ];

  return (
    <>
      <Settings settingsTitle="Account Settings" items={items} />
      <div style={{marginTop: 8, fontSize: 12, color: '#666'}}>{lastEvent}</div>
    </>
  );
}

Result

Loading...

Compound Components

Use compound components to control ordering and use of underlying sub-components.

Live Editor

function Example() {
  const [lastEvent, setLastEvent] = React.useState('Ready');
  const items = [
    {
      icon: PersonOutlined,
      title: 'Username',
      value: 'johndoe',
      onClick: () => setLastEvent('Username clicked'),
    },
    {
      icon: EmailOutlined,
      title: 'Email',
      value: 'john.doe@example.com',
      onClick: () => setLastEvent('Email clicked'),
    },
    {
      icon: LockOutlined,
      title: 'Password',
      value: 'Last change 30 days ago',
      onClick: () => setLastEvent('Password clicked'),
    },
    {
      icon: PhoneOutlined,
      title: 'Phone Number',
      value: '+1 (555) 123-4567',
      onClick: () => setLastEvent('Phone Number clicked'),
    },
    {
      icon: BadgeOutlined,
      title: 'Display Name',
      value: 'John Doe',
      onClick: () => setLastEvent('Display Name clicked'),
    },
    {
      icon: NotificationsNone,
      title: 'Notifications',
      value: 'Email and push enabled',
      onClick: () => setLastEvent('Notifications clicked'),
    },
  ];

  return (
    <>
      <Settings settingsTitle="Account Settings" items={items}>
        <Settings.Title>My Settings</Settings.Title>
        <Settings.SettingsRows />
      </Settings>
      <div style={{marginTop: 8, fontSize: 12, color: '#666'}}>{lastEvent}</div>
    </>
  );
}

Result

Loading...

Block Override

Use function children to override default blocks and order.

Live Editor

function Example() {
  const [lastEvent, setLastEvent] = React.useState('Ready');
  const items = [
    {
      icon: PersonOutlined,
      title: 'Username',
      value: 'johndoe',
      onClick: () => setLastEvent('Username clicked'),
    },
    {
      icon: EmailOutlined,
      title: 'Email',
      value: 'john.doe@example.com',
      onClick: () => setLastEvent('Email clicked'),
    },
    {
      icon: LockOutlined,
      title: 'Password',
      value: 'Last changed 30 days ago',
      onClick: () => setLastEvent('Password clicked'),
    },
  ];

  return (
    <>
      <Settings settingsTitle="Account Settings" items={items}>
        {({defaultBlocks, defaultBlockOrder}) => ({
          blocks: {
            ...defaultBlocks,
            accountHeader: (
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 16,
                  padding: 16,
                  background: '#fff',
                  borderRadius: 8,
                  marginBottom: 8,
                }}
              >
                <div
                  style={{
                    width: 48,
                    height: 48,
                    borderRadius: '50%',
                    background: 'linear-gradient(135deg, #1976d2 0%, #42a5f5 100%)',
                    color: '#fff',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontWeight: 600,
                    fontSize: 18,
                    flexShrink: 0,
                  }}
                >
                  JD
                </div>
                <div style={{minWidth: 0}}>
                  <div style={{fontWeight: 600, fontSize: 16, lineHeight: 1.4}}>John Doe</div>
                  <div style={{color: '#666', fontSize: 14, lineHeight: 1.4}}>
                    john.doe@example.com · Member since Jan 2024
                  </div>
                </div>
              </div>
            ),
          },
          blockOrder: ['accountHeader', ...defaultBlockOrder],
        })}
      </Settings>
      <div style={{marginTop: 8, fontSize: 12, color: '#666'}}>{lastEvent}</div>
    </>
  );
}

Result

Loading...

When to use block overrides

Use overrides when you need to change block order, replace the default title or rows, or inject custom content while keeping shared settingsTitle and items in context.

Important Props

Core Props

Prop	Type	Required	Default	Description
settingsTitle	string	Yes	-	Title for the settings section; used by Settings.Title when children is omitted
items	SettingsItem[]	Yes	-	Rows rendered by Settings.SettingsRows (see shape above)

Layout and Composition Props

Prop	Type	Required	Default	Description
children	BlocksOverride | ReactNode	No	undefined	Compound sub-components or a block override function
className	string	No	undefined	Class name for the root container (also applies nbb-settings)
sx	SxProps	No	panel padding and #F3F3F3 background	MUI system styles for the root Stack

Settings inherits StackProps (except children), so standard layout props are supported on the root. Default block order is title → settingsRows → settingsRow; the root filters settingsRow out of default rendering because it is a template row for overrides.

Sub-components read values from context and accept partial overrides:

• Settings.Title — Typography props; children defaults to settingsTitle from context (variant="h6", component="h4")
• Settings.SettingsRows — Stack props; optional items overrides context; children replaces auto-generated rows
• Settings.SettingsRow — Button props plus required icon (SvgIconComponent) and label; optional value and children for custom row content

Default UI Blocks

Block	Built on	Notes
Settings (root)	Stack	Settings panel wrapper with responsive spacing, padding, and #F3F3F3 background
Settings.Title	Typography	Section heading (variant="h6", component="h4")
Settings.SettingsRows	Stack	Maps items to Settings.SettingsRow instances
Settings.SettingsRow	Button + Stack + Typography + ChevronRight	Outlined row with icon, label, optional value, and trailing chevron

TypeScript

import {Settings} from '@nodeblocks/frontend-settings-block';
import type {SvgIconComponent} from '@mui/icons-material';

type SettingsItem = {
  icon: SvgIconComponent;
  title: string;
  value?: string;
  onClick: () => void;
};

function AccountSettingsPanel({rows}: {rows: SettingsItem[]}) {
  return <Settings settingsTitle="Account Settings" items={rows} />;
}