Installation

Install MBSW in a React project and start using its components.

Before you start

MBSW supports React 19 and React DOM 19. Run the commands below from your project's root directory.

Install

Install the components and design tokens together.

Package	Provides
`@mbsw/ui`	React components such as Button, Input and Dialog
`@mbsw/tokens`	Shared colors, typography, spacing and other design values

This command installs the versions used in these docs: @mbsw/ui@1.1.0 and @mbsw/tokens@1.1.0.

npm install @mbsw/ui@1.1.0 @mbsw/tokens@1.1.0 tailwindcss@4

The command also installs Tailwind CSS 4, which the token package requires as a peer dependency. Component styles ship as CSS. You do not need a Tailwind build setup for basic usage.

Import styles

Add these imports to your global CSS file in this order. Import that file once from your app's entry point.

@import '@mbsw/tokens/styles.css';
@import '@mbsw/tokens/motion.css';
@import '@mbsw/ui/styles.css';

Token styles provide shared design values, and UI styles define how components look. The optional motion stylesheet reduces animations and transitions across the document when the user prefers reduced motion. You can omit it if your app handles motion separately.

Use components

Import the components you need from @mbsw/ui.

import { Button } from '@mbsw/ui';

export default function App() {
  return <Button>Get started</Button>;
}

Each component page has an interactive example. Adjust its settings, then copy the code from the Code tab into your project.

Next steps

Components: Browse components and try the examples.
Theme and styles: Configure dark mode, CSS variables and Tailwind integration.
Changelog: See release changes and upgrade instructions.