A library of Helsinki Design System components implemented using React.
📚 See the components in Storybook
Install the package.
yarn add hds-reactJS
import { TextInput } from "hds-react";
// you can also import components individually instead of importing the whole package
import { TextInput } from "hds-react/components/TextInput";The Helsinki fonts are not included in the package due to copyright reasons.
Read more here.
- 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
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: