hds-react

A library of Helsinki Design System components implemented using React.

:books: See the components in Storybook

Getting started

Install the package.

yarn add hds-react

Using the components

JS

import { TextInput } from "hds-react";

// you can also import components individually instead of importing the whole package
import { TextInput } from "hds-react/components/TextInput";

Helsinki fonts

The Helsinki fonts are not included in the package due to copyright reasons.

Development

Read more here.

Built with

• React with TypeScript support
• Bundled with Rollup, compiled with Babel
• CSS Modules with typed-css-modules for styles
• ESLint for code analysis
• Prettier for code formatting
• Jest with React Testing Library for testing
• Loki for visual regression testing

Supported browsers

Helsinki Design System uses the react-scripts library's default browserslist config to target a broad range of browsers. This means that the following browsers are supported:

• Chrome
• Chrome for Android
• Chrome for iOS (uses same engine as Safari iOS)
• Edge
• Edge for Android (uses same engine as Chrome for Android)
• Edge for iOS (uses same engine as Safari iOS)
• Firefox
• Firefox for Android
• Firefox for iOS (uses same engine as Safari iOS)
• Safari
• Safari iOS

The supported browser versions are listed in browserslists test page

More info about browser support:

• Create React App - Configuring Supported Browsers
• HDS documentation general FAQ - What browser and browser versions are supported?