A library of Helsinki Design System components implemented using React.
📚 See the components in Storybook
- React 19 or later (
reactandreact-domare peer dependencies). npm, pnpm, and Yarn warn at install time if your app does not satisfy this range.
Install the package.
pnpm 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
- Playwright end-to-end tests in the repository
e2eworkspace (including Storybook-driven checks)
Babel (@babel/preset-env) is configured with broad browser targets to support a wide 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
Resolved versions for this package’s Babel targets (>1%, not dead, not ie 11, not op_mini all) are shown on browsersl.ist (Finland region).
More info about browser support: