@sunbound/ui-kit
v0.1.1
Published
Sunbound UI kit
Readme
@sunbound/ui-kit
Sunbound's shared UI kit. It re-exports @mui/material and layers
on the Sunbound theme.
Install
@mui/material and its peers are peer dependencies — the consuming app must provide them:
npm install @sunbound/ui-kit \
@mui/material@^6.5.0 \
@emotion/react@^11.11.1 \
@emotion/styled@^11.11.0 \
react@^18.3.1 \
react-dom@^18.3.1Fonts
The theme's typography relies on two Google Fonts — Mona Sans and Space Mono. The consuming app must provide them.
Load them however you want; the simplest way is a Google Fonts <link> in your HTML <head>:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>Setup
Wrap your app once with MUI's ThemeProvider using the kit's theme, and add CssBaseline to apply
MUI's baseline styles. Both are exported from @sunbound/ui-kit:
import { ThemeProvider, CssBaseline, theme } from '@sunbound/ui-kit';
export function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{/* your app */}
</ThemeProvider>
);
}Usage
Import components (and the palette/typography tokens) from the kit:
import { Button, Typography, colors } from '@sunbound/ui-kit';
export function Example() {
return (
<>
<Button variant="contained">Save</Button>
<Typography variant="body2" sx={{ color: colors.red[600] }}>
Something went wrong. Please try again.
</Typography>
</>
);
}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