Quantum Component Library

A React component library based on the Quantum Design System

Installation

npm install --save @nearform/quantum

Configuration

With Tailwind

Include or extend our colour configuration and add our components to Tailwind's content configuration. To ensure dark mode of the components isn't operating system dependent, add the darkMode: "class" entry to the config.

// tailwind.config.js
import quantumPlugin from '@nearform/quantum/tailwind-plugin'
module.exports = {
  //...tailwind config
  plugins: [quantumPlugin]
  darkMode: "class"
}

Without Tailwind

//root component
import '@nearform/quantum/dist/global.css'
import { Button } from '@nearform/quantum'

Tests

To run tests for the project, run:

npm run test

To run Storybook tests for the project, run:

npm run test-storybook

Usage

Just import:

import { Button, ButtonGroup } from '@nearform/quantum'

And use:

<ButtonGroup>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>