onyxia-ui

The Onyxia UI toolkit

Documentation

This project is a React UI toolkit that implement a design system created for Onyxia by Marc Hufschmitt.

This project provide some custom components but you can also use any MUI component they will be automatically styled to fit the design system.

• Optimized for typescript, theme customization without module augmentation.
• Built in support for the dark mode.
• If you want to diverge from the Onyxia Design system, the theme is customizable, you can for example change the fonts and the colors.
• Provide splash screen that hide the screen when needed.
• Perfect for building white label Web APP: The theme and assets, icons can be configured at runtime.

Disclaimer: onyxia-ui is specifically designed to build SPA (Vite projects) and is not SSR compatible (Not compatible with Next).

Eco-system

• tss-react: Mandatory, the styling solution used by onyxia-ui.
• @mui/material: Mandatory, onyxia-ui is built on top of MUI.
• gitlanding: Optional, a component library to create landing pages with onyxia-ui.
• mui-icons-material-lazy: Optional, Enable lazy loading of Material icons (if you don't know at build time which icons you will need).
• screen-scaler: Optional, if you don't have time to make your app responsive.

Showcase

datalab.sspcloud.fr

datalab.sspcloud.fr with "France" palette

datalab.sspcloud.fr with "Ultraviolet" palette

Usage

yarn add onyxia-ui @mui/material @emotion/react @emotion/styled tss-react

The easer way to get started is to checkout this demo repository: onyxia-ui + gilanding starter.

You can see more advanced examples here: test app of this repo.