🎨 Design System 2.0

The Design System 2.0 builds on Material UI (MUI) to provide a maintained and bullet proven set of UI components. It extends on the foundation of MUI to provide additional components documented with Storybook

Intention It is not providing any business logic but instead is meant to help you focus on the business logic by providing comprehensive UI components. It's foundation is Material UI while we extend on it to customize for anynines' needs.

📦 Installation

# yarn
yarn add anynines/a9s-design-system

# npm
npm install anynines/a9s-design-system

✨ Available Scripts

In the project directory, you can run:

yarn storybook

Runs the storybook in the development mode.
Open http://localhost:6006 to view it in the browser.

The page will reload if you make edits.

yarn build

Builds the app for production or publishing to the build folder.\

🚀 Publishing

To publish the Design System to the npm registry run

yarn publish

You need to be logged in with npm login first. If you don't have an account or are not yet member of the npm organization, please drop DL a line.

💎 Use Premium Features

To use MUI premium components like the XGrid or DateRangePicker you need to add a .env file to your root directory and add your MUI License key like this:

REACT_APP_MUI_LICENSE="..."

Find license key in 1Password as MUI License key, if you don't have access pm DL.

ℹ️ More Info

Material UI (MUI)

You can use any component from Material UI and simply import it from @anynines/a9s-design-system instead of @mui/material. If a component or type from MUI is not part of the design system you can also import it right from MUI, by default all components should just work fine.

Storybook

On top of Material UI we have built more helpful components. The documentation can be found here (TODO: Add deployed version of storybook here). Locally you can start storybook with yarn storybook on port localhost:6006.

Boilerplate

A React Boilerplate using Typescript proper ESLint and Prettier setup as well as the Design System to quickstart a basic frontend applciation, can be found here.

Token System

The Design System comes with a light and dark mode following the anynines Corporate Identity. Anynines team can access the Token System to easily switch to the branding of one of our customers.