Skip to main content

Settings Block

The Settings Component is a fully customizable and accessible settings interface built with React and TypeScript. It provides a complete settings menu with modern design patterns, flexible customization options, and a clean hierarchical structure for organizing settings items.

πŸš€ Installation​

npm install @nodeblocks/frontend-settings-block@0.2.0

πŸ“– Usage​

import {Settings} from '@nodeblocks/frontend-settings-block';
Live Editor
function SimpleSettings() {
  const items = [
    {
      icon: AccountCircleIcon,
      title: 'Profile Settings',
      value: 'John Doe',
      onClick: () => console.log('Profile clicked'),
    },
    {
      icon: NotificationsIcon,
      title: 'Notifications',
      value: 'On',
      onClick: () => console.log('Notifications clicked'),
    },
    {
      icon: LockIcon,
      title: 'Password & Security',
      onClick: () => console.log('Security clicked'),
    },
    {
      icon: LanguageIcon,
      title: 'Language',
      value: 'English',
      onClick: () => console.log('Language clicked'),
    },
    {
      icon: DarkModeIcon,
      title: 'Theme',
      value: 'Light',
      onClick: () => console.log('Theme clicked'),
    },
  ];

  return (
    <Settings settingsTitle="Settings" items={items}>
      <Settings.Title />
      <Settings.SettingsRows />
    </Settings>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
settingsTitlestringRequiredTitle for the settings section used in context and default title rendering
itemsSettingsItem[]RequiredArray of settings items to be displayed
spacingnumber | ResponsiveValue1Spacing between child elements
classNamestringundefinedAdditional CSS class name for styling the settings container
sxSxProps<Theme>See belowMUI System prop for custom styling
childrenBlocksOverrideundefinedCustom block components to override default rendering

Default sx:

{
  bgcolor: 'grey.50',
  p: 2
}

Note: This component inherits all MUI Stack props.

Sub-Components​

The Settings component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

Settings.Title​

Renders the title for the settings section.

PropTypeDefaultDescription
childrenReactNodesettingsTitle from contextTitle content - falls back to settingsTitle if not provided
settingsTitlestringFrom contextTitle text (overrides context)
variantstring'h6'Typography variant
componentElementType'h4'The component used for the root node
sxSxProps<Theme>undefinedMUI System prop for custom styling

Note: This component inherits all MUI Typography props.

Settings.SettingsRow​

Renders an individual settings row item as a clickable button.

PropTypeDefaultDescription
iconSvgIconComponentRequiredMUI icon component to display on the left
labelstringRequiredPrimary text for the settings row
valuestringundefinedOptional secondary text displayed below the label
childrenReactNodeDefault label/value renderingCustom content to override default text rendering
onClick() => voidundefinedClick handler (from ButtonProps)
variant'text' | 'outlined' | 'contained''outlined'Button variant
size'small' | 'medium' | 'large''large'Button size
sxSxProps<Theme>See belowMUI System prop for custom styling

Default sx:

{
  border: 0,
  display: 'flex',
  alignItems: 'center',
  px: 2,
  py: 1.5,
  bgcolor: 'background.paper',
  borderRadius: 0,
  borderTop: '1px solid',
  borderColor: theme.palette.divider,
  '&:first-of-type': {
    borderTopLeftRadius: theme.shape.borderRadius * 2,
    borderTopRightRadius: theme.shape.borderRadius * 2,
    borderTop: '1px solid transparent'
  },
  '&:last-of-type': {
    borderBottomLeftRadius: theme.shape.borderRadius * 2,
    borderBottomRightRadius: theme.shape.borderRadius * 2
  },
  '&:hover': {
    outline: '1px solid',
    outlineColor: 'primary.main',
    borderColor: 'transparent',
    zIndex: 1
  }
}

Note: This component inherits all MUI Button props. The icon is rendered with color: 'primary.main' and a ChevronRight icon is automatically appended on the right.

Settings.SettingsRows​

Renders the container for all settings rows.

PropTypeDefaultDescription
itemsSettingsItem[]From contextArray of settings items to render - falls back to context items
childrenReactNodeAuto-generated rowsCustom content to override default settings rows rendering
sxSxProps<Theme>undefinedMUI System prop for custom styling

Note: This component inherits all MUI Stack props. When children is not provided, it maps items to Settings.SettingsRow components.

🎨 Configuration examples​

Custom Title Styling​

<Settings.Title 
  variant="h5"
  sx={{ color: 'primary.main', fontWeight: 700 }} 
/>

Custom Settings Row Styling​

<Settings.SettingsRow
  icon={Person}
  label="Profile"
  value="John Doe"
  onClick={() => console.log('Profile clicked')}
  sx={{ 
    bgcolor: 'grey.50',
    '&:hover': { bgcolor: 'primary.light' }
  }}
/>

Custom Settings Rows Container​

<Settings.SettingsRows
  sx={{
    boxShadow: 1,
    borderRadius: 2,
  }}
/>

Custom Styling​

import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import LanguageIcon from '@mui/icons-material/Language';
import SecurityIcon from '@mui/icons-material/Security';

function CustomStyledSettings() {
  const items = [
    {
      icon: AccountCircleIcon,
      title: 'Display Name',
      value: 'John Doe',
      onClick: () => console.log('Display name clicked'),
    },
    {
      icon: LanguageIcon,
      title: 'Timezone',
      value: 'UTC-5',
      onClick: () => console.log('Timezone clicked'),
    },
    {
      icon: SecurityIcon,
      title: 'Privacy',
      value: 'Public',
      onClick: () => console.log('Privacy clicked'),
    },
  ];

  return (
    <Settings
      settingsTitle="General Settings"
      items={items}
      sx={{
        bgcolor: 'grey.900',
        color: 'grey.100',
        p: 3,
        borderRadius: 2,
      }}
    >
      <Settings.Title
        sx={{
          color: 'grey.100',
          fontWeight: 700,
          mb: 2,
        }}
      />
      <Settings.SettingsRows
        sx={{
          '& .MuiButton-root': {
            bgcolor: 'grey.800',
            color: 'grey.100',
            borderRadius: 2,
            justifyContent: 'flex-start',
            p: 2,
            mb: 1,
            '&:hover': {
              bgcolor: 'grey.700',
            },
          },
          '& .MuiTypography-root': {
            color: 'grey.100',
          },
          '& .MuiSvgIcon-root': {
            color: 'primary.light',
          },
        }}
      />
    </Settings>
  );
}

Individual Settings Rows​

import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import SecurityIcon from '@mui/icons-material/Security';
import NotificationsIcon from '@mui/icons-material/Notifications';

function SettingsWithIndividualRows() {
  const items = [
    {
      icon: AccountCircleIcon,
      title: 'Account',
      onClick: () => console.log('Account'),
    },
    {
      icon: SecurityIcon,
      title: 'Security',
      value: '2FA Enabled',
      onClick: () => console.log('Security'),
    },
  ];

  return (
    <Settings settingsTitle="Quick Settings" items={items} sx={{p: 3}}>
      <Settings.Title />
      <Settings.SettingsRow icon={AccountCircleIcon} label="Account" onClick={() => console.log('Account')} />
      <Settings.SettingsRow
        icon={SecurityIcon}
        label="Security"
        value="2FA Enabled"
        onClick={() => console.log('Security')}
      />
      <Settings.SettingsRow
        icon={NotificationsIcon}
        label="Notifications"
        value="On"
        onClick={() => console.log('Notifications')}
        sx={{
          bgcolor: 'primary.light',
          color: 'primary.contrastText',
          '&:hover': {
            bgcolor: 'primary.main',
          },
        }}
      />
    </Settings>
  );
}

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {Settings} from '@nodeblocks/frontend-settings-block';
import {SvgIconComponent} from '@mui/icons-material';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import LockIcon from '@mui/icons-material/Lock';
import NotificationsIcon from '@mui/icons-material/Notifications';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LanguageIcon from '@mui/icons-material/Language';
import React from 'react';

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

function TypedSettings() {
  const settingsItems: SettingsItem[] = [
    {
      icon: AccountCircleIcon,
      title: 'Profile Information',
      value: 'Edit your personal details',
      onClick: (): void => console.log('Profile clicked'),
    },
    {
      icon: LockIcon,
      title: 'Password',
      value: 'Last changed 30 days ago',
      onClick: (): void => console.log('Password clicked'),
    },
    {
      icon: NotificationsIcon,
      title: 'Notifications',
      value: 'All enabled',
      onClick: (): void => console.log('Notifications clicked'),
    },
    {
      icon: DarkModeIcon,
      title: 'Appearance',
      value: 'System default',
      onClick: (): void => console.log('Appearance clicked'),
    },
    {
      icon: LanguageIcon,
      title: 'Language',
      value: 'English (US)',
      onClick: (): void => console.log('Language clicked'),
    },
  ];

  return (
    <Settings settingsTitle="User Preferences" items={settingsItems} spacing={2} sx={{maxWidth: 500}}>
      <Settings.Title />
      <Settings.SettingsRows />
    </Settings>
  );
}

πŸ“ Notes​

  • The main component uses MUI Stack with spacing={1} and default background/padding styling.
  • Settings.Title uses MUI Typography with variant="h6" and component="h4" by default.
  • Settings.SettingsRow uses MUI Button with variant="outlined" and size="large" by default.
  • Each row displays an icon (with color: 'primary.main'), label, optional value, and a ChevronRight arrow.
  • The row styling creates a seamless list with rounded corners on first/last items.
  • Hover effects include a primary color outline for visual feedback.
  • The icon prop requires an actual MUI SvgIconComponent (e.g., Person, Lock, Notifications from @mui/icons-material).
  • Context values (settingsTitle, items) are shared via React Context and can be overridden at the sub-component level.

Built with ❀️ using React, TypeScript, and MUI.