cowork ui kit · showcase · 02 · part a

Composites · molecules

Part B →
Section 01 · 10 components

Molecules rendered live

Mỗi card hiển thị render thật của 1 molecule, các variant + state đặt cùng row để compare nhanh. Token-driven, brand-swap được.

01Accordion

3-item FAQ. Item đầu mở mặc định, dùng <details> native.

Trầm hương An Nhiên có nguồn gốc từ đâu?
Nguyên liệu chính được tuyển chọn từ vùng Khánh Hòa và Quảng Nam, nơi có khí hậu lý tưởng cho cây dó bầu kết tinh dầu trầm theo thời gian tự nhiên.
Cách phân biệt trầm hương thật và giả?
Quan sát vân gỗ, mùi hương khi đốt, độ chìm trong nước, và yêu cầu giấy kiểm định CITES nếu cần xuất khẩu.
Bảo quản nhang trầm sao cho lâu?
Đặt trong hộp gỗ kín, tránh ánh nắng trực tiếp và độ ẩm cao. Hộp đậy nắp sẽ giữ hương 12-18 tháng.

02Banner

4 variants info / success / warning / danger trên grid 2 cột.

04Card

3 variants default / elevated / outlined — image + title + desc + meta.

trầm
Nhang vòng 24h
Nhang vòng đốt 24 tiếng, hương dịu, không khói gắt. Phù hợp phòng thiền và thờ tự.
HỘP 24 VÒNG520K
tinh
Tinh dầu trầm 5ml
Chiết xuất 100% từ trầm Khánh Hòa, dùng nhỏ giọt đèn xông hoặc làm nước hoa khô.
5ML · TRẦM1.2TR
khói
Khói trầm xông phòng
Dạng nén cao cấp, cháy chậm 90 phút, giải toả căng thẳng và tĩnh tâm.
NÉN · 12 VIÊN380K

06FormGroup

Label + input + helper + error. 3 rows: bình thường, có helper, error.

Dùng để nhận thông báo đơn hàng qua Zalo OA.
⚠ Email không hợp lệ — thiếu domain.

07Pagination

2 variants: short range 1-5 và truncated với ellipsis.

Range 1-5
Truncated 1 … 8 … 20

09Tabs

4 tabs với count badge. Tab active đang hiển thị panel content.

Tất cả đơn hàng (124)

Hiển thị mọi đơn không lọc trạng thái. Mặc định sắp xếp theo ngày tạo giảm dần. Nhấn vào header column để đổi sort, hoặc bấm tab khác để filter nhanh theo lifecycle.

10Toast

4 variants stacked, mỗi cái có icon + title + body + close.

✓
Lưu thành công
Cài đặt brand An Nhiên đã được áp dụng.
×
Không thể kết nối
Mất kết nối API Pancake. Thử lại sau 30s.
!
Tồn kho thấp
Sản phẩm "Nhang vòng 24h" còn dưới 5 hộp.
i
Tip nhỏ
Bấm ⌘K để mở Command Palette nhanh.