@xtreamsrl/react-ui-kit

This package exposes React components to facilitate the frontend development of web applications especially when the level of customization is low.

Installation

npm install @xtreamsrl/react-ui-kit

Usage

To use the library it is necessary to complete the following step. You need to add the entire content of the augmentation folder to the include field of the tsconfig.json file.

"./node_modules/@xtreamsrl/react-ui-kit/src/theme/augmentation/*.d.ts"

For example:

{
  "include": ["src", "./node_modules/@xtreamsrl/react-ui-kit/src/theme/augmentation/*.d.ts"]
}

Any third party dependencies referenced by the augmentation/*.d.ts files need to be installed:

npm install @mui/material

In order to exploit all the components of the library it is required to import ThemeProvider and createTheme from the @xtreamsrl/react-ui-kit library.

The entire application must be wrapped in the ThemeProvider component, which accepts a theme prop of type Theme (see below).

This theme object is configured only once using the createTheme function, which accepts a ThemeOptions object. Here is an example of theme configuration and provision:

import {createTheme, ThemeProvider} from "@xtreamsrl/react-ui-kit";

const theme = createTheme(
  {
    typography: {
      fontFamily: "Inter"
    },
    palette: {
      brand: {
        1: '#FFEBEB',
        2: '#FFDBDC',
        3: '#FFC7C8',
        4: '#FFB8B9',
        5: '#FFA3A5',
        6: '#FF8F91',
        7: '#FF8082',
        8: '#FF6B6E',
        9: '#FF5A5E',
        10: '#9B171C',
        11: '#6F1114',
        12: '#420A0C'
      }
    }
  }
)

export function App() {
  return <ThemeProvider theme={theme}>
    <MainApp/>
  </ThemeProvider>
}

At this point you are able to use all the components of the library as needed. It will be sufficient to import them from the library and use them as any other React component. Import components singularly to avoid your bundle becoming too large, so instead of:

import {Button} from "@xtreamsrl/react-ui-kit";

always prefer:

import {Button} from "@xtreamsrl/react-ui-kit/Button";

Who we are