Quorix UI

Từ sản phẩm, thành nền tảng chung

Quorix UI bắt đầu từ một nhu cầu đơn giản: quorix-vietnam cần một ngôn ngữ giao diện nhất quán. Thay vì xây dựng từ bảng thiết kế lý thuyết, chúng tôi rút ra từng layout, từng component, từng bề mặt từ những gì sản phẩm thực sự cần. Rồi chuẩn hóa chúng thành một package có thể tái sử dụng.

Hôm nay, Quorix UI không còn chỉ là bộ reset + vài file token. Nó là design system và UI toolkit đủ sức để các sản phẩm mới trong hệ sinh thái Quorix có thể xây dựng nhanh hơn mà không mất đi tính nhất quán và bản sắc.

Bên trong có gì

Phiên bản hiện tại bao phủ toàn bộ tầng presentation và interactive behavior:

Foundation & Tokens

• CSS reset và base normalization
• Color, typography, spacing, radius, shadow tokens
• Form controls, layout primitives, utility classes

Components & Primitives

• Button, card, badge, divider, tabs, modal, toast
• Theme manager, scroll utilities, audio player (TypeScript)

Editorial & Content Surfaces

• Prose layout, code block styling, article extensions
• TOC, hero section, metadata grid, video/audio embeds

AI-First Primitives

• Answer panel, source list, quick results panel
• Thread chat interface primitives

Distribution

• Browser, ESM, CJS builds
• TypeScript declarations
• Pre-publish verification + dry-run packing

Cấu trúc package:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

css/
  ai-search.css
  animations.css
  article-extensions.css
  colors.css
  components.css
  editorial.css
  forms.css
  icons.css
  index.css
  layout.css
  metrics.css
  primitives.css
  reset.css
  typography.css
  utilities.css
dist/
  quorix.min.css
  quorix.min.js
  quorix.esm.js
  quorix.cjs
  quorix.d.ts
fonts/
  AWSDiatypeRoundedSemi-Mono-Bold.woff2
  AWSDiatypeRoundedSemi-Mono-Regular.woff2
  FragmentMono-Regular.woff2
js/
  quorix.ts

Cách sử dụng

npm

1

npm install @quorix/ui

1
2

import '@quorix/ui/dist/quorix.min.css';
import '@quorix/ui/dist/quorix.min.js';

Import theo module

1
2
3
4
5

import '@quorix/ui/css/colors';
import '@quorix/ui/css/components';
import '@quorix/ui/css/article-extensions';
import '@quorix/ui/css/ai-search';
import '@quorix/ui/css/animations';

CDN

1
2
3
4
5
6
7
8

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@quorix/ui@2.1.8/dist/quorix.min.css"
/>
<script
  src="https://cdn.jsdelivr.net/npm/@quorix/ui@2.1.8/dist/quorix.min.js"
  defer
></script>

Thông tin package

Tại sao đây là nền tảng

Quorix UI giải quyết ba vấn đề cụ thể:

1. Consistency — Từ token đến interactive behavior, tất cả các sản phẩm trong Quorix nói cùng một “ngôn ngữ giao diện”
2. Velocity — Primitives và layouts đã sẵn sàng. Sản phẩm mới không phải dựng lại form controls hay article layout từ đầu
3. Quality — Package được version, verify, release qua npm/CDN. Frontend foundation không phải là ad-hoc scripts

Kết quả là quorix-vietnam có một codebase sạch hơn, và các dự án tiếp theo có thể khởi động nhanh hơn mà vẫn giữ được bản sắc Quorix.

Tiếp theo

Quorix UI đang được sử dụng trực tiếp trong quorix-vietnam và sẵn sàng cho các sản phẩm mới. Nếu bạn có hứng thú với giao diện hệ sinh thái Quorix, hãy xem package này trên npm hoặc GitHub.

Đóng góp? Bạn hãy mở issue trên vmcchooky/quorix-ui.