Cài đặt

Cài adapter cho framework của bạn cùng với stylesheet:

React

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

Vue

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

Angular

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

@thl-ui/core, @thl-ui/locales, @thl-ui/tokens, @thl-ui/icons và @thl-ui/charts được cài tự động.

Adapter	Yêu cầu
@thl-ui/react	React ≥ 18
@thl-ui/vue	Vue ≥ 3.5.2
@thl-ui/angular	Angular ≥ 20 (standalone component, signals; zoneless hoặc zone.js)

Mỗi phiên bản tối thiểu đều được kiểm chứng: cài gói đã đóng gói vào một dự án mới dùng đúng phiên bản đó, kiểm tra kiểu, build và thao tác thử.

Style

Import toàn bộ một lần:

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

Hoặc chỉ import token + phần cần dùng:

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

Angular: thêm vào angular.json → "styles": ["node_modules/@thl-ui/styles/dist/thl-ui.css"].

Thêm class thl-body vào <body> (hoặc thl-root cho một vùng bất kỳ) để có font, màu và cỡ tiêu đề cơ bản.

Font

Open Sans (variable, độ đậm 300–800, giấy phép SIL OFL 1.1) được tự host: thl-ui.css đã có sẵn @font-face, file woff2 nằm trong @thl-ui/styles/dist/fonts/, không gọi tới Google Fonts. Có các subset latin, latin-ext, vietnamese, cyrillic, greek; trình duyệt chỉ tải subset mà trang cần. Chữ Nhật và Trung dùng font hệ thống.

Nếu import CSS theo từng component thay vì thl-ui.css, hãy tự thêm @thl-ui/styles/fonts.css. Muốn đổi font thì ghi đè --thl-font-family.

Chạy trong monorepo

npm install          # .npmrc dùng legacy-peer-deps (tránh lỗi npm 10.9)
npm run build        # build mọi package
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  # trang tài liệu này, http://localhost:5184