Skip to main content
🏠Getting StartedVersion: 2.0.0-beta.15

Installation

Quantum design system - Native React components library for Quantum Design System.

Install package​

After installing npm, pnpm, or yarn, and having configured the artifactory, you can install @qtm/react2 with this command:

npm install -S @qtm/react2@latest
info

The @qtm/react2 package is a native React implementation of the Quantum Design System, unlike the original @qtm/react which is implemented with Stencil. This new package no longer has dependencies on web-components and offers improved DOM manipulation, especially with dynamic changes.

Key Differences from @qtm/react​

  • Native React Components: Built directly with React instead of Stencil-wrapped components
  • Component Naming: The "Qtm" prefix has been removed from component names (e.g., Button instead of QtmButton)
  • No Web-Components Dependency: Standalone React implementation without web-components dependencies

Install fonts​

The Quantum design system was designed with the Roboto font in mind. The Roboto fonts will not be automatically loaded by the Thales design system. The developer is responsible for loading all fonts used in their application.

Roboto & Roboto Mono fonts have a few easy ways to get started.

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
  rel="stylesheet"
/>
info

As the fontsource documentation says, importing the '@fontsource/roboto'or the '@fontsource/roboto-mono' only imports the font weight 400. In order to support more weight or styles, and to import the same configuration as the CDN, you can import the fontsource as below:


import '@fontsource/roboto/100.css';
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import '@fontsource/roboto/900.css';

import '@fontsource/roboto/100-italic.css';
import '@fontsource/roboto/300-italic.css';
import '@fontsource/roboto/400-italic.css';
import '@fontsource/roboto/500-italic.css';
import '@fontsource/roboto/700-italic.css';
import '@fontsource/roboto/900-italic.css';

Install icons​

The Quantum Design System was designed with the Material icons in mind.

The Material icons will not automatically be loaded by the Quantum Design System. The developer is responsible for loading all icons used in their application.

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
  rel="stylesheet"
/>

Usage​

Once you have installed this package, you just have to import components you need in your React application!

Here is an example of the integration of a Button component:

// Using the new component naming without Qtm prefix
import { Button } from '@qtm/react2';

function App() {
  return <Button onClickEvent={() => console.log('clicked')}>Click</Button>;
}

If you're migrating from @qtm/react and want to maintain backward compatibility, you can use aliasing:

// Using aliasing for backward compatibility
import { Button as QtmButton } from '@qtm/react2';

function App() {
  return (
    <QtmButton onClickEvent={() => console.log('clicked')}>Click</QtmButton>
  );
}

Import styles​

You need to import the CSS file to see the component styling:

@import '@qtm/react2/dist/style.css';

Utilities (Optional)​

It provides you with a complete CSS with a huge set of utility classes as it is generated with Tailwind CSS. Then it will be up to you to optimize for production by purging the CSS according to the classes used in your HTML.

By importing into the global.css file:

@import '@qtm/css/dist/utilities.css';

For example:

<div className="flex p-m mb-m">
  <p className="text-primary-500">
    Hello
    <span className="font-bold">World!</span>
    <span role="img" aria-label="Tada!"> 🎉 </span>
  </p>
</div>

If you already using Tailwind CSS in your project or you want to take full advantage of all its features like functions & directives by building your own classes via @apply for example. You can check our package @qtm/tailwind-preset which will explain to you how to use Quantum styles in a Tailwind project.