Installation
Install the adapter for your framework plus the stylesheet:
npm i @thl-ui/react @thl-ui/stylesnpm i @thl-ui/vue @thl-ui/stylesnpm i @thl-ui/angular @thl-ui/styles@thl-ui/core, @thl-ui/locales, @thl-ui/tokens, @thl-ui/icons and @thl-ui/charts are installed automatically as dependencies.
Peer requirements
| Adapter | Requires |
|---|---|
@thl-ui/react | React ≥ 18 |
@thl-ui/vue | Vue ≥ 3.5.2 |
@thl-ui/angular | Angular ≥ 20 (standalone components, signals; zoneless or zone.js) |
Each minimum version is verified by installing the published packages into a fresh project on that version, type-checking, building and clicking through it.
Styles
Import the full bundle once:
import '@thl-ui/styles/thl-ui.css';Or import only tokens + what you use:
import '@thl-ui/styles/tokens.css';
import '@thl-ui/styles/components/button.css';
import '@thl-ui/styles/components/form.css';Available per-component files: alert, app, avatar, badge, button, card, form, nav, overlay, pages, progress, ribbon, table, widgets.
For Angular add the CSS to angular.json:
"styles": ["node_modules/@thl-ui/styles/dist/thl-ui.css", "src/styles.css"]SCSS sources are published too (@thl-ui/styles/scss/*) if you want to change the class prefix at build time.
Base styles
thl-ui does not reset global elements. Add thl-body to <body> (or thl-root to any wrapper) to get the base font, colors and heading scale:
<body class="thl-body">Font
Open Sans (variable, weights 300–800, SIL OFL 1.1) is self-hosted: thl-ui.css already contains the @font-face rules and the woff2 files ship in @thl-ui/styles/dist/fonts/, so no request goes to Google Fonts. Subsets: latin, latin-ext, vietnamese, cyrillic, greek; the browser only downloads the ones a page uses. Japanese and Chinese text falls back to the system font.
If you import per-component CSS instead of thl-ui.css, add @thl-ui/styles/fonts.css yourself. To use another font, override --thl-font-family.
Working in this monorepo
npm install # uses .npmrc legacy-peer-deps (npm 10.9 workaround)
npm run build # all packages
npm test # vitest (core + react + vue)
npm run dev:react # http://localhost:5181
npm run dev:vue # http://localhost:5182
npm run dev:angular # http://localhost:5183
npm run dev -w docs # this site, http://localhost:5184