はじめに

thl-ui は独自の CSS（Bootstrap も jQuery も不要）を持つフレームワーク非依存のデザインシステムで、React・Vue・Angular 向けのネイティブコンポーネントを提供します。

アーキテクチャ

            ┌────────────────────────── @thl-ui/core ──────────────────────────┐
            │  createThl()  →  config store · i18n · applyToDocument()          │
            │  headless: tabs · table · select · toast · upload · calendar …    │
            │  utils: bem() · cx() · focusTrap · scrollLock · clickOutside      │
            └───────────────▲──────────────────▲──────────────────▲────────────┘
                            │                  │                  │
   @thl-ui/tokens ──► @thl-ui/styles (CSS vars, .thl-* BEM, 12 skins, dark)
                            │                  │                  │
                  @thl-ui/react         @thl-ui/vue        @thl-ui/angular
               ThlProvider + hooks   plugin + composables  provideThlUI + signals

パッケージ	用途
`@thl-ui/tokens`	デザイントークン（パレット、余白、角丸、スキン）→ CSS カスタムプロパティ
`@thl-ui/styles`	フレームワーク非依存の CSS（`thl-ui.css`、コンポーネント別 CSS、SCSS ソース）
`@thl-ui/locales`	`en`、`vi`、`ja`、`zh` のメッセージと型
`@thl-ui/core`	設定、i18n、ヘッドレスなステートマシン、ユーティリティ
`@thl-ui/icons`	アイコンレジストリ（lucide のサブセット、フォントアイコンで拡張可能）
`@thl-ui/charts`	依存関係のない SVG チャートのジオメトリ
`@thl-ui/react` · `@thl-ui/vue` · `@thl-ui/angular`	ネイティブアダプター

同じ API を 3 つのフレームワークで

どのアダプターも同一のマークアップ（共通の bem() ヘルパーで生成）を出力し、同じ prop 名を公開しているため、コンポーネントはどこでも同じ見た目と動作になります。

VueReactAngular

vue

<ThlButton variant="primary" icon="download" rounded>ダウンロード</ThlButton>

tsx

<Button variant="primary" icon="download" rounded>ダウンロード</Button>

html

<button thl-button variant="primary" icon="download" rounded>ダウンロード</button>

違いは各フレームワークの慣習に従う部分だけです。

概念	Vue	React	Angular
インストール	`app.use(ThlUI, config)`	`<ThlProvider config>`	`provideThlUI(config)`
双方向バインディング	`v-model`	`value` + `onChange`	`[(value)]`, `formControlName`, `ngModel`
翻訳	`useI18n().t` / `$t`	`useT()`	`ThlI18nService.t` / `\| thlT`
設定	`useThlConfig()`	`useThlConfig()`	`ThlConfigService`
トースト	`useToast()`	`useToast()`	`ThlToastService`
確認ダイアログ	`confirm()`	`confirm()`	`ThlModalService.confirm()`
コンポーネント名	`ThlButton`	`Button`	`ThlButtonComponent` / `thl-*` セレクター

はじめに ​

アーキテクチャ ​

同じ API を 3 つのフレームワークで ​

次のステップ ​

はじめに

アーキテクチャ

同じ API を 3 つのフレームワークで

次のステップ