cowork ui kit · showcase · 02 · part b

Composites · organisms +

← Part A
Section 02 · 10 components

Organisms composed live

Compound components — kết hợp nhiều molecule để giải quyết 1 nhu cầu UI cụ thể (search, table, modal, hero, pricing…).

01Command Palette

Open state: search input + 5 result items grouped + keyboard hint footer.

⌕ esc
Đề xuất
📦Tạo đơn hàng mới
⌘N
🔍Xem tất cả đơn hàng
GO
📊Báo cáo đơn hàng tuần
⌘R
Khách hàng
👤Khách hàng VIP đang chờ
↵
💬Tin nhắn chưa trả lời (12)
⌘M
↑↓ điều hướng ↵ chọn esc đóng

02DataTable

5 rows × 5 col + checkbox col + sort indicator + pagination foot.

Chọn tất cả Mã đơn ↓ Khách hàng Sản phẩm Trạng thái Tổng
AN-2401 Nguyễn Mai Anh Nhang vòng 24h × 2 Đã giao 1.040.000₫
AN-2402 Trần Văn Hùng Tinh dầu trầm 5ml Đang giao 1.200.000₫
AN-2403 Lê Thuý Hằng Khói trầm × 1, Tinh dầu × 1 Đã xác nhận 1.580.000₫
AN-2404 Phạm Đức Anh Vòng trầm tay Chờ thanh toán 2.800.000₫
AN-2405 Đỗ Hoài Linh Nhang vòng × 1 Đã huỷ 520.000₫
Đã chọn 2 / 124 đơn Trang 1 / 25 · 5 dòng / trang

03Drawer

Side panel slide-in từ phải, scrim dim background phía sau.

— nội dung phía sau bị làm mờ —

Chi tiết đơn #AN-2401

Khách hàng
Nguyễn Mai Anh
Sản phẩm
Nhang vòng 24h × 2
Tinh dầu trầm 5ml × 1
Trạng thái
Đã giao
Tổng tiền
1.040.000₫
Ghi chú
Khách yêu cầu gói quà, có thiệp ghi "Bình an".

04FAQ

5-question accordion, item đầu mở. Style editorial nhẹ hơn molecule Accordion.

Trầm hương An Nhiên có gì đặc biệt?
An Nhiên chọn nguyên liệu từ vùng dó bầu kết tinh tự nhiên ≥10 năm, không tẩm hoá học, mỗi mẻ đều có giấy kiểm định độc lập.
Tôi có thể mua trực tiếp ở đâu?
Hệ thống 3 showroom Sài Gòn — Hà Nội — Đà Nẵng, hoặc đặt online giao toàn quốc qua website chính thức.
Hàng có chính sách đổi trả không?
Đổi trong 7 ngày nếu sản phẩm còn nguyên seal, hoá đơn và lý do hợp lệ. Phí vận chuyển 2 chiều khách trả.
Có làm quà tặng doanh nghiệp số lượng lớn?
Có. Liên hệ qua Zalo OA để được tư vấn gói B2B, in logo, thiết kế hộp riêng từ 30 phần trở lên.
Mua bao nhiêu thì được miễn phí ship?
Miễn phí ship nội thành TP.HCM cho đơn từ 800K. Ngoại thành và tỉnh khác từ 1.5tr.

05Hero

Landing hero warm: eyebrow + serif title + sub + 2 CTA + visual block.

An Nhiên · Trầm hương Khánh Hoà

Hương trầm giữ lại nhịp thở.

Nhang vòng và tinh dầu trầm được tuyển chọn từ rừng dó bầu hơn 10 năm tuổi. Mỗi mẻ đều có giấy kiểm định, không tẩm hoá học, không khói gắt — chỉ còn lại hương dịu cho buổi sáng yên.

Khám phá sản phẩm → Câu chuyện An Nhiên
an

06KPICard

4 KPI: Revenue / Orders / AOV / Conversion. Mỗi card có delta + sparkline.

Revenue · MTD
241M₫
+18.4% ↑
Orders · MTD
312
+9.2% ↑
AOV
772K₫
+3.1% ↑
Conversion
3.84%
−0.4% ↓

07Modal

Centered modal trên scrim — header + body + footer 2 button.

background scrim

Xác nhận xoá đơn?

Hành động này không thể hoàn tác.
Đơn #AN-2403 sẽ bị xoá khỏi hệ thống. Lịch sử khách hàng vẫn được giữ lại nhưng dữ liệu đơn (sản phẩm, thanh toán, ghi chú) sẽ mất vĩnh viễn.

09Pricing

3-tier grid: Free / Pro (featured) / Business. Pro nổi bật scale 1.02 + ribbon.

Khởi hành
₫0

Đủ để chạy 1 brand cá nhân, không billing.

  • 1 brand workspace
  • 10 component templates
  • Community support
Phổ biến
Chuyên nghiệp
₫249K / tháng

Cho freelancer và shop nhỏ chạy ads + bán hàng.

  • 3 brand workspace
  • Full UI kit + brand presets
  • Email + chat support 24h
  • Pancake API + Botcake
Doanh nghiệp
₫799K / tháng

Multi-brand, multi-team, có quản trị quyền và SLA.

  • Không giới hạn brand
  • Custom domain + SSO
  • SLA 99.9% + dedicated Slack
  • Audit log + role permissions

10Sidebar

Vertical nav 6 items + section dividers + user card footer.

An Nhiên
Tổng quan
▣Dashboard
📦Đơn hàng12
👤Khách hàng
Marketing
📣Campaigns
💬Chat3
📊Báo cáo
PD
Phan Đăng Founder · An Nhiên
— Main content area —
Section 03 · 6 archetypes

Archetype previews

6 layout chính cho mọi UI page mới. Click vào card để mở full page. Iframe scaled 0.25× cho thumbnail.

Archetype A · dark

Dashboard

KPI + charts + table — SaaS analytics, ads pulse, ops monitor.
Archetype B · dark

Tool

Sidebar + list/detail CRUD — admin panels, CMS, internal tools.
Archetype C · warm

Landing

Hero + pricing + FAQ — marketing site, product launch, sales page.
Archetype D · warm

Editorial

Article + drop cap — blog, long-form post, brand journal.
Archetype E · warm

Deck

Slide deck 5+ slide — pitch, internal review, conference talk.
Archetype F · warm

PWA

iPhone mobile shell — installable app, booking flow, member portal.
Section 04 · 20 component docs

Per-component docs

Bảng tra cứu: TSX source, markdown doc, và brand thực tế đang dùng component này.

Component TSX source Doc Real-world brand
Molecules · 10
Accordion Accordion.tsx Accordion.md An Nhiên FAQ trầm hương
Banner Banner.tsx Banner.md KHI notice tồn kho lớp Pilates
Breadcrumb Breadcrumb.tsx Breadcrumb.md An Nhiên nav danh mục sản phẩm
Card Card.tsx Card.md BetterBuy product grid e-com
Dropdown Dropdown.tsx Dropdown.md AI Tools filter dashboard
FormGroup FormGroup.tsx FormGroup.md KHI booking buổi tập
Pagination Pagination.tsx Pagination.md HaoGood blog NZL pagination
SearchBar SearchBar.tsx SearchBar.md An Nhiên shop search bar
Tabs Tabs.tsx Tabs.md KHI orders lifecycle filter
Toast Toast.tsx Toast.md A-Kryphan form submit feedback
Organisms · 10
CmdPalette CmdPalette.tsx CmdPalette.md AI Tools ⌘K quick nav
DataTable DataTable.tsx DataTable.md An Nhiên orders dashboard
Drawer Drawer.tsx Drawer.md BetterBuy cart side panel
FAQ FAQ.tsx FAQ.md An Nhiên landing FAQ section
Hero Hero.tsx Hero.md KHI studio landing hero
KPICard KPICard.tsx KPICard.md KHI Ads Pulse dashboard
Modal Modal.tsx Modal.md An Nhiên confirm xoá đơn
Navbar Navbar.tsx Navbar.md A-Kryphan blog top nav
Pricing Pricing.tsx Pricing.md Cowork DNA service offer tier
Sidebar Sidebar.tsx Sidebar.md KWM admin shell