インストール

使用するフレームワーク用のアダプターとスタイルシートをインストールします。

ReactVueAngular

npm i @thl-ui/react @thl-ui/styles

npm i @thl-ui/vue @thl-ui/styles

npm i @thl-ui/angular @thl-ui/styles

@thl-ui/core、@thl-ui/locales、@thl-ui/tokens、@thl-ui/icons、@thl-ui/charts は依存関係として自動的にインストールされます。

peer 要件

アダプター	要件
`@thl-ui/react`	React ≥ 18
`@thl-ui/vue`	Vue ≥ 3.5.2
`@thl-ui/angular`	Angular ≥ 20（standalone コンポーネント、signals。zoneless / zone.js のどちらも可）

各最小バージョンは、そのバージョンの新規プロジェクトに公開パッケージをインストールし、型チェック・ビルド・実際の操作を行って検証しています。

スタイル

バンドル全体を一度だけ読み込みます。

import '@thl-ui/styles/thl-ui.css';

または、トークンと使用するものだけを読み込みます。

import '@thl-ui/styles/tokens.css';
import '@thl-ui/styles/components/button.css';
import '@thl-ui/styles/components/form.css';

利用できるコンポーネント別ファイル: alert、app、avatar、badge、button、card、form、nav、overlay、pages、progress、ribbon、table、widgets。

Angular では angular.json に CSS を追加します。

json

"styles": ["node_modules/@thl-ui/styles/dist/thl-ui.css", "src/styles.css"]

ビルド時にクラスの prefix を変更したい場合のために、SCSS ソース（@thl-ui/styles/scss/*）も公開しています。

ベーススタイル

thl-ui はグローバル要素をリセットしません。<body> に thl-body（または任意のラッパーに thl-root）を付けると、ベースのフォント、色、見出しサイズが適用されます。

html

<body class="thl-body">

フォント

Open Sans（可変フォント、ウェイト 300–800、SIL OFL 1.1）はセルフホストです。thl-ui.css に @font-face ルールが含まれ、woff2 ファイルは @thl-ui/styles/dist/fonts/ に同梱されているため、Google Fonts へのリクエストは発生しません。サブセットは latin、latin-ext、vietnamese、cyrillic、greek で、ブラウザはページで使われるものだけをダウンロードします。日本語と中国語のテキストはシステムフォントにフォールバックします。

thl-ui.css ではなくコンポーネント別 CSS を読み込む場合は、@thl-ui/styles/fonts.css を自分で追加してください。別のフォントを使うには --thl-font-family を上書きします。

このモノレポでの作業

npm install          # .npmrc の legacy-peer-deps を使用（npm 10.9 の回避策）
npm run build        # すべてのパッケージ
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  # このサイト、http://localhost:5184

インストール ​

peer 要件 ​

スタイル ​

ベーススタイル ​

フォント ​