About

Prima Materia UI is a basic component library for React. Use the links on the left to browse the different categories of components.

To explore the components in this library, see the Storybook here: https://prima-materia-js.github.io/ui/.

Features

Prima Materia UI is designed to quickly create a usable UI for a web application built on React. It provides components for page layout, navigation, forms and user input, and styling.

Themes

Light and dark mode are supported. You can customise each theme's color schemes using the <ThemeConfiguration> component. Refer to the Theming section on the left to read more.

Use the <ThemeToggle> component anywhere in your app to toggle between light and dark mode.

Navigation

Some components used for navigation, such as <NavLink> are designed to be used with the react-router-dom package only. You may not be able to use these if you are using a different routing library.

How to Use

Installation

$ npm install @prima-materia/ui

or

$ yarn add @prima-materia/ui

Using the library in your app

In your app's entry point (e.g. index.tsx), first load the common stylesheet:

import '@prima-materia/ui/dist/style.css';

Then, wrap your app in the <ThemeConfiguration> component:

root.render(
  <ThemeConfiguration>
    <App />
  </ThemeConfiguration>
);

You can now import and use any component in your app.