@bayonai/mui-design

Shared Bayon AI Material UI design package for React websites.

Published package: @bayonai/mui-design on npm

Install

npm install @bayonai/mui-design @mui/material @mui/icons-material @mui/material-pigment-css @emotion/react @emotion/styled @emotion/cache react react-dom

The MUI 9, Pigment CSS, Emotion, React, and React DOM packages are peer dependencies so each consuming website controls its own app runtime.

Provider

Provider and icon-button helpers are client-only exports:

import { BayonThemeProvider } from '@bayonai/mui-design/client';

export function App({ children }: { children: React.ReactNode }) {
  return <BayonThemeProvider>{children}</BayonThemeProvider>;
}

Theme And Styles

Theme, token, style recipe, and box/card component exports are safe to import from server-rendered React code:

import {
  bayonDarkTheme,
  BayonAccentPanel,
  BayonCtaPanel,
  mutedTextSx,
  tealButtonSx,
} from '@bayonai/mui-design';

Use the exported theme tokens and sx recipes as the single source of truth for Bayon surfaces, panels, buttons, and page shells.

Special Boxes

<BayonAccentPanel hover sx={{ p: 4 }}>
  Shared accent panel content
</BayonAccentPanel>

<BayonCtaPanel sx={{ p: { xs: 3, md: 5 } }}>
  Shared CTA content
</BayonCtaPanel>

Available shared surfaces include BayonPageShell, BayonGradientHero, BayonDarkPanel, BayonAccentPanel, BayonCtaPanel, BayonContentBox, BayonProjectCard, BayonPillarCard, BayonMethodBox, BayonFlowVisual, and BayonTechChip.

Icon Buttons

import SearchIcon from '@mui/icons-material/Search';
import { IconTooltipButton } from '@bayonai/mui-design/client';

<IconTooltipButton label="Search">
  <SearchIcon />
</IconTooltipButton>

Local Development

From the repository root:

npm run build -w @bayonai/mui-design
npm run typecheck -w @bayonai/mui-design

The main website consumes this package through the local npm workspace while the same package is available to other websites through npm.

Publishing

1. Update the version in packages/mui-design/package.json.
2. Build and typecheck the package.
3. Publish from the repo root:

npm publish --workspace @bayonai/mui-design