Installation & Setup

Mosmox UI is a React component framework for building expressive interfaces with a consistent visual language. This page covers the recommended installation path, project setup, and links to the source packages.

Choose what to installCopy Anchor Link

The framework is split into focused packages so you can install only what your project needs:

• mosmox-react-framework — the main React component library and styles.
• @mosmox-ui/icons — standalone SVG icons with configurable size, weight, color, and mirroring.
• @mosmox-ui/colors — named tonal color tokens and the ColorSwatch component.

Install from npmCopy Anchor Link

Install the component framework in an existing React application:

npm install mosmox-react-framework

Then add the companion packages when you need icons or the color system:

npm install @mosmox-ui/icons @mosmox-ui/colors

The same packages can be installed with pnpm or Yarn:

pnpm add mosmox-react-framework @mosmox-ui/icons @mosmox-ui/colors
yarn add mosmox-react-framework @mosmox-ui/icons @mosmox-ui/colors

React 18 or newer is required. Keep the packages at compatible versions when upgrading the framework.

Use a componentCopy Anchor Link

Import components from the package entry point and render them like regular React components:

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

export function Example() {
  return <Button variant="primary">Get started</Button>;
}

If you are working directly from this repository, the framework lives in react-framework/packages/ui. Run the local app from the react-framework workspace and keep the @mosmox/ui alias from its TypeScript and Vite configuration.

Configure your design systemCopy Anchor Link

Mosmox UI includes a ConfigProvider for application-wide configuration. Wrap the part of your app that uses Mosmox components to define shared design tokens, component defaults, and the default interface language in one place.

With ConfigProvider you can customize:

• design styles such as semantic colors, control radius, font family, and font weights;
• component defaults for Button, Skeleton, CodeBlock, List, Tabs, Empty, CookieBanner, and PricingTable;
• localization for supported components with en, uk, de, or fr;
• scoped themes by nesting one provider inside another.

import { Button, ConfigProvider, Input } from '@mosmox/ui';

export function App() {
  return (
    <ConfigProvider
      locale="uk"
      theme={{
        colors: {
          primary: '#d90b2c',
          primaryHover: '#b90825',
          controlBorder: '#d9dee5',
          focus: '#d90b2c',
        },
        radius: '8px',
        typography: {
          fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif',
          fontWeightMedium: 600,
        },
      }}
      components={{
        button: { radius: '999px', iconSize: '18px' },
        skeleton: { animation: 'wave', radius: '8px' },
      }}
    >
      <Button>Зберегти</Button>
      <Input label="Ім’я" />
    </ConfigProvider>
  );
}

The provider only affects its own React subtree. Component-level props take precedence over provider defaults, so a single component can still opt into a different style or behavior. Read the complete ConfigProvider documentation for all theme tokens, supported component settings, nesting rules, and API details.

Project linksCopy Anchor Link

• Open the Mosmox UI repository on GitHub
• Browse the Mosmox UI organization on GitHub
• Search Mosmox packages on npmjs.com

Next stepsCopy Anchor Link

Continue with the Icon Library or Color System, or open the component pages in the navigation to explore individual APIs.