Component library

Components can be used as react components or as web components. TypeScript definitions are included.

Installation

Run one of the following commands to add gu-ds-components to your project:

npm install gu-ds-components

yarn add gu-ds-components

You will also need to install react and react-dom

Inter font

The Inter variable font is used by default. It can be installed separately from fontsource with one of these commands:

npm install @fontsource-variable/inter

yarn add @fontsource-variable/inter

And then imported in your project:

import '@fontsource-variable/inter';

Usage

Components can be imported as react components or as web components.

As a react component:

import { ProgressBar } from "gu-ds-components/react";
const App = () => <ProgressBar />;

As a custom element:

<script>import "gu-ds-components/web-components";</script>
<gu-ds-progress-bar />

As a web component:

import { ProgressBar } from "gu-ds-components/web-components";
const progressBar = new ProgressBar();
document.body.appendChild(progressBar);

CSS

CSS can be imported in JavaScript if supported by your bundler:

import "gu-ds-components/css/components.css";

gu-ds-components assumes that box-sizing is set to border-box:

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

We recommend using normalize.css or something similar to normalize browser styles.