@sunbound/ui-kit

Sunbound's shared UI kit. It's built on top of Material UI V6, layering on its own components and theme.

It also provides an icon set via @sunbound/ui-kit/icons, which is based on Lucide.

Install

Install @sunbound/ui-kit, plus its peer dependencies: React, MUI, and Lucide.

npm install @sunbound/ui-kit \
  @mui/material@^6.5.0 \
  @emotion/react@^11.11.1 \
  @emotion/styled@^11.11.0 \
  lucide-react@^0.577.0 \
  react@^18.3.1 \
  react-dom@^18.3.1

Setup

Wrap your app once with MUI's ThemeProvider, using the kit's theme. There are additional providers you'll need for toasts and panels: ToastProvider and PanelNavProvider. Also add CssBaseline and UIKitGlobalStyles to apply baseline styles. Then render your app.

import { ThemeProvider, ToastProvider, CssBaseline, UIKitGlobalStyles, theme } from '@sunbound/ui-kit';

export function App() {
    return (
        <ThemeProvider theme={theme}>
            <ToastProvider>
                <PanelNavProvider>
                    <CssBaseline />
                    <UIKitGlobalStyles />
                    {/* your app */}
                </PanelNavProvider>
            </ToastProvider>
        </ThemeProvider>
    );
}

Also call trackMouseUsage() once at startup. This ensures accessible styles for input/select work properly.

import { createRoot } from 'react-dom/client';
import { trackMouseUsage } from '@sunbound/ui-kit';

trackMouseUsage();

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

Usage

Import components from the kit and render them in your app. You can also utilize the palette/typography tokens from the kit:

import { Button, Typography, colors } from '@sunbound/ui-kit';
import { ChevronLeft, MoveIn } from '@sunbound/ui-kit/icons';

export function Example() {
    return (
        <>
            <Button variant="primary" startIcon={<ChevronLeft />}>Back</Button>
            <MoveIn width={20} height={20} />
            <Typography variant="Body/B2" sx={{ color: colors.red[600] }}>
                Something went wrong. Please try again.
            </Typography>
        </>
    );
}

All available components are listed in the Component index. All components are showcased on the Storybook docs site (live link).

Local development

npm run build            # use Vite to build the library into dist/
npm run build:watch      # rebuild dist/ on change — run while developing the portals
npm run typecheck        # run the TypeScript compiler
npm run lint             # run ESLint checks
npm run storybook        # run Storybook on http://localhost:6600
npm run storybook:build  # build the static Storybook site

Additional topics

• Routing — wiring Link up to react-router
• Component index — all components listed
• MUI compatibility — differences from MUI