Prerequisites

This page describes the dependencies and conventions that are mandatory in order to use DevrosUI. Therefore it is highly advised to read through this page first and follow the steps before installing and using DevrosUI.

Dependencies

Manual installations

DevrosUI is a React component library, but doesn't have the React bundle included in the npm package. Therefore, you must have react and react-dom installed in your project You can refer to the official documentation for installing a React app.

Automatic installations

DevrosUI also uses react-icons, motion and @fontsource/geist. When installing DevrosUI, these packs will be included in the installation.

Styling

Import styles

In order to give the components correct styling, you need to import the global stylesheet once in your app.

In main.jsx or App.jsx, write the following:

Now you can use components in any file as shown below:

Theme colours

@devrosui/react uses its own tokens to define the theme colours of the components. It is possible to override these colours and map them to your own colours to let the components use the colours of the consumer app. Below is a list of tokens @devrosui/react uses for its theme colours:

If you want to map a token to another color, simply do the following:

Theme toggle

As mentioned in the homepage, all components are compatible with dark and light modes. That is, the components follow a dark-theme by default, but change to a light-mode if the theme of the whole app also changes to light-mode. This means that you don't have to manually implement this for every component yourself. However, this requires you to follow our implementation of a theme toggle so the internal theme toggles in the components will be compatible with the theme toggle of your app. Our theme toggle implementation is as follows:

This implementation simply toggles the light className to the html document.