Giới thiệu

thl-ui là design system độc lập framework, CSS tự viết (không Bootstrap, không jQuery), cung cấp component native cho React, Vue và Angular.

Kiến trúc

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

Package	Vai trò
@thl-ui/tokens	Design token (bảng màu, khoảng cách, bo góc, skin) → CSS custom properties
@thl-ui/styles	CSS không phụ thuộc framework (thl-ui.css, CSS từng component, nguồn SCSS)
@thl-ui/locales	Bản dịch en, ja, vi, zh + kiểu
@thl-ui/core	Cấu hình, i18n, headless state machine, tiện ích
@thl-ui/icons	Registry icon (bộ lucide, mở rộng được bằng font icon)
@thl-ui/charts	Hình học biểu đồ SVG không phụ thuộc thư viện
@thl-ui/react · @thl-ui/vue · @thl-ui/angular	Adapter native

Một API, ba framework

Mọi adapter sinh ra markup giống hệt nhau (cùng dùng bem()) và cùng tên prop:

Vue

<ThlButton variant="primary" icon="download" rounded>Tải xuống</ThlButton>

React

<Button variant="primary" icon="download" rounded>Tải xuống</Button>

Angular

<button thl-button variant="primary" icon="download" rounded>Tải xuống</button>

Khác biệt chỉ nằm ở thói quen của từng framework:

Khái niệm	Vue	React	Angular
Cài đặt	app.use(ThlUI, config)	<ThlProvider config>	provideThlUI(config)
Binding 2 chiều	v-model	value + onChange	[(value)], formControlName, ngModel
Dịch	useI18n().t / $t	useT()	ThlI18nService.t / | thlT
Cấu hình	useThlConfig()	useThlConfig()	ThlConfigService
Toast	useToast()	useToast()	ThlToastService
Xác nhận	confirm()	confirm()	ThlModalService.confirm()
Tên component	ThlButton	Button	ThlButtonComponent / selector thl-*

Tiếp theo

• Cài đặt → Hướng dẫn từng bước: dựng trang admin đầu tiên
• Thiết lập theo framework: React · Vue · Angular
• Cấu hình toàn cục · i18n · Theme
• Danh sách component (demo chạy trực tiếp, mã nguồn cho cả 3 framework)
• Hỏi đáp & xử lý sự cố