Tổng quan Components

Registry CLI hiện cung cấp số lượng component và block có thể cài như bảng dưới. Đây không phải tuyên bố rằng API giữa mọi framework đã đồng bộ tuyệt đối.

Phạm Vi Nền Tảng

Nền Tảng	Components	Styling	Trạng Thái
React 18+	75	Tailwind CSS v3/v4 + Radix UI	Mốc tham chiếu cho web
Vue 3	75	Tailwind CSS v3/v4 + Radix Vue	Đủ component parity với React
Angular 20+	71	Tailwind CSS v3/v4 + Radix NG	Đủ component parity với React
React Native	70	NativeWind	Phạm vi riêng cho mobile
Flutter	69	Material Design 3	Phạm vi riêng cho mobile

Ba registry web có chung 56 tên component nền. React có thêm date-picker, date-range-picker, date-time-picker, time-picker; Angular có thêm gauge. Tổng trong bảng đã bao gồm block.

Cài đặt

Cài đặt từng component riêng lẻ bằng CLI:

npm

npx @galaxy-stack/nebula-cli@latest add button

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add button

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add button

bun

bunx @galaxy-stack/nebula-cli@latest add button

global

galaxy-design add button

Hoặc cài đặt nhiều components cùng lúc:

npm

npx @galaxy-stack/nebula-cli@latest add button input dialog

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add button input dialog

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add button input dialog

bun

bunx @galaxy-stack/nebula-cli@latest add button input dialog

global

galaxy-design add button input dialog

Phân loại Components

Form Components

Các controls cơ bản cho form nhập liệu:

• Button - Nút bấm với nhiều biến thể
• Input - Trường nhập văn bản
• Checkbox - Hộp kiểm cho lựa chọn nhị phân
• Radio Group - Nhóm radio button cho lựa chọn duy nhất
• Select - Menu lựa chọn dropdown
• Slider - Thanh trượt range
• Switch - Công tắc bật/tắt
• Textarea - Nhập văn bản nhiều dòng
• Label - Nhãn cho trường form
• Calendar - Lịch chọn ngày
• Calendar Range - Chọn khoảng thời gian
• Tags Input - Nhập nhiều giá trị tag

Layout Components

Components để tổ chức nội dung:

• Separator - Đường phân cách
• Accordion - Các phần nội dung mở rộng được
• Collapsible - Vùng nội dung có thể thu gọn
• Tabs - Giao diện tab
• Aspect Ratio - Duy trì tỷ lệ khung hình cho nội dung media
• Resizable - Nhóm panel có thể thay đổi kích thước với hỗ trợ bàn phím
• Sheet - Panel trượt từ cạnh màn hình
• Toolbar - Container nhóm các controls

Navigation Components

Components cho điều hướng và menu:

• Navigation Menu - Menu điều hướng với submenu
• Menubar - Thanh menu với dropdown
• Context Menu - Menu ngữ cảnh (chuột phải)
• Dropdown Menu - Menu dropdown
• Pagination - Phân trang với số trang
• Command - Command palette cho điều hướng bằng bàn phím

Interactive Components

Các thành phần tương tác:

• Toggle - Nút bấm hai trạng thái
• Toggle Group - Nhóm nút toggle cho lựa chọn đơn hoặc nhiều

Feedback Components

Components cho trạng thái, loading và phản hồi hệ thống:

• Spinner - Spinner loading không xác định tiến trình

Overlay Components

Hộp thoại modal và popup:

• Dialog - Hộp thoại modal
• Alert Dialog - Hộp thoại xác nhận
• Popover - Nội dung popover nổi
• Tooltip - Tooltip khi hover
• Hover Card - Card hover phong phú

Data Display Components

Components để hiển thị dữ liệu và phản hồi:

• Avatar - Avatar người dùng với fallback
• Progress - Thanh tiến trình
• Table - Bảng dữ liệu responsive
• Kbd - Hiển thị phím bàn phím
• Typography - Components định dạng văn bản
• Empty - Placeholder trạng thái rỗng
• Skeleton - Placeholder khi đang tải

Hỗ trợ Nền Tảng

Web Frameworks

Tất cả web components đều khả dụng cho:

• Vue 3 - Composition API với <script setup>
• React 18+ - Hooks với forwardRef
• Angular 20+ - Standalone components với Signals

Mobile Platforms

Mobile components khả dụng cho:

• React Native - Functional components với NativeWind v4 styling
• Flutter - StatelessWidget với Material Design 3

Lưu ý: Không phải tất cả web components đều phù hợp với mobile (ví dụ: Hover Card, Context Menu), vì vậy catalog mobile chủ động khác catalog web.

Tính năng

• Accessible - Xây dựng trên Radix primitives (tuân thủ WAI-ARIA)
• Tùy biến - Kiểm soát hoàn toàn với Tailwind CSS
• Type-safe - Hỗ trợ TypeScript cho tất cả frameworks
• Dark mode - Hỗ trợ dark mode tích hợp
• Copy & Paste - Không cần npm dependencies, copy components trực tiếp vào project
• API nhất quán - API tương tự trên tất cả frameworks

Ví dụ sử dụng

Mỗi component hoạt động tương tự trên các framework:

Vue

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button variant="default">Click me</Button>
</template>

React

import { Button } from "@/components/ui/button"

export default function App() {
  return <Button variant="default">Click me</Button>
}

Angular

import { Component } from '@angular/core';
import { ButtonComponent } from '@/components/ui/button';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ButtonComponent],
  template: `<ui-button variant="default">Click me</ui-button>`
})
export class AppComponent {}

Bước tiếp theo

• Duyệt qua components để tìm component bạn cần
• Xem hướng dẫn Sử dụng CLI để tìm hiểu thêm về CLI
• Đọc hướng dẫn Theming để tùy chỉnh giao diện

Khả năng truy cập

• Điều hướng bàn phím: [TODO]
• Đọc màn hình: [TODO]
• Quản lý focus: [TODO]
• Tuân thủ WCAG: Tuân thủ WCAG 2.1 cấp độ AA

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)