nxds with MUI

npx nxds-cli@latest init
npx nxds-cli@latest add button

// app/layout.tsx
import { AppRouterCacheProvider } from '@mui/material-nextjs/v16-appRouter';

import { NxdsAppearanceProvider } from '@/components/nxds/components/appearance/provider';
import { NxdsAppearanceScript } from '@/components/nxds/components/appearance/provider/server';

import { APPEARANCE_STORAGE_KEY, defaultAppearance } from './appearance-state';
import { MuiProvider } from './mui-provider';

import './globals.css';
import './nxds.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <NxdsAppearanceScript
          storageKey={APPEARANCE_STORAGE_KEY}
          defaultState={defaultAppearance}
        />
      </head>
      <body>
        <NxdsAppearanceProvider
          storageKey={APPEARANCE_STORAGE_KEY}
          defaultState={defaultAppearance}
        >
          <AppRouterCacheProvider>
            <MuiProvider>{children}</MuiProvider>
          </AppRouterCacheProvider>
        </NxdsAppearanceProvider>
      </body>
    </html>
  );
}

// app/page.tsx
import MuiButton from '@mui/material/Button';
import Stack from '@mui/material/Stack';

import { Button } from '@/components/nxds/components/button/button';

export default function Page() {
  return (
    <Stack direction="row" spacing={2}>
      <MuiButton variant="contained">Save</MuiButton>
      <Button variant="outline">Preview</Button>
    </Stack>
  );
}

/* app/nxds.css, after the imports */
:root {
  --nx-z-index-modal: 1600;
  --nx-z-index-popover: 1700;
  --nx-z-index-toast: 1800;
}

// app/mui-provider.tsx
'use client';

import CssBaseline from '@mui/material/CssBaseline';
import {
  type StorageManager,
  ThemeProvider,
  useColorScheme,
} from '@mui/material/styles';
import { readStoredNxdsAppearance } from '@nxds/core';
import { useEffect } from 'react';

import { useNxdsAppearance } from '@/components/nxds/components/appearance/provider';

import { APPEARANCE_STORAGE_KEY, defaultAppearance } from './appearance-state';
import { theme } from './theme';

const nxdsModeStorage: StorageManager = ({ key }) => ({
  get: (fallback) =>
    key === 'mui-mode'
      ? readStoredNxdsAppearance(APPEARANCE_STORAGE_KEY, defaultAppearance).mode
      : fallback,
  set() {},
  subscribe: () => () => {},
});

function MuiFollowsNxds() {
  const { state, mounted } = useNxdsAppearance();
  const { setMode } = useColorScheme();

  useEffect(() => {
    if (mounted) setMode(state.mode);
  }, [mounted, state.mode, setMode]);

  return null;
}

export function MuiProvider({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider theme={theme} storageManager={nxdsModeStorage}>
      <CssBaseline />
      <MuiFollowsNxds />
      {children}
    </ThemeProvider>
  );
}

// app/theme.ts
'use client';

import { createTheme } from '@mui/material/styles';

import { brand } from './brand';

const primary = { main: brand.color };

export const theme = createTheme({
  colorSchemes: {
    light: { palette: { primary } },
    dark: { palette: { primary } },
  },
  cssVariables: { colorSchemeSelector: 'class' },
  typography: { fontFamily: brand.font },
});

// app/mode-toggle.tsx
'use client';

import Button from '@mui/material/Button';

import { useNxdsAppearance } from '@/components/nxds/components/appearance/provider';

export function ModeToggle() {
  const { setState, resolvedMode } = useNxdsAppearance();
  const next = resolvedMode === 'dark' ? 'light' : 'dark';

  return (
    <Button
      variant="outlined"
      onClick={() => setState((current) => ({ ...current, mode: next }))}
    >
      Switch to {next}
    </Button>
  );
}

// app/brand.ts
export const brand = {
  color: '#1976d2',
  font: '"Roboto", "Helvetica", "Arial", sans-serif',
};

// app/appearance-state.ts
import { DEFAULT_NXDS_APPEARANCE, type NxdsAppearanceState } from '@nxds/core';

import { brand } from './brand';

export const APPEARANCE_STORAGE_KEY = 'app-appearance';

export const defaultAppearance = {
  ...DEFAULT_NXDS_APPEARANCE,
  brandColor: brand.color,
  surfaceTone: 'neutral',
  corners: 'subtle',
  prefs: { ...DEFAULT_NXDS_APPEARANCE.prefs, uiFont: brand.font },
} satisfies NxdsAppearanceState;

// Before
import TextField from '@mui/material/TextField';

<TextField
  label="Email"
  type="email"
  helperText="We never share it."
  error={Boolean(error)}
/>;

// After
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from '@/components/nxds/components/field/field';
import { Input } from '@/components/nxds/components/input/input';

<Field data-invalid={Boolean(error)}>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" aria-invalid={Boolean(error)} />
  <FieldDescription>We never share it.</FieldDescription>
  <FieldError>{error}</FieldError>
</Field>;