← Cowork UI Kit

v0.5 · Showcase

Một bộ kit, một ngôn ngữ

Showcase tổng hợp 4 lớp Cowork UI Kit: primitives (tokens + atoms + icon), composites (molecules + organisms), data visualization (dashboard blocks), patterns (mobile + auth + states).

Note: URL cũ /showcase/01-primitives.html đã deprecate (v0.3, dùng hex literal). Trang này thay thế, link tới resource hiện tại trong kit v0.5 (HSL math + 371 token + 40 component + 14K từ docs).

01

Primitives

Tokens, foundation colors, typography, spacing, atoms (button/input/badge…), icon set. Đây là building block nguyên tử.

Design tokens JSON

371 token × 7 brand × 2 aesthetic — JSON flat + nested

tokens/tokens.json

Foundation tokens

Spacing, typography, z-index, radius, border, motion (duration + easing)

tokens/foundation.css

Semantic tokens

Primary/accent/status colors composed từ HSL math, elevation system 6-level

tokens/semantic.css

7 brand presets

An Nhien · KHI · BetterBuy · Xanh · A-Kryphan · HaoGood · AI Tools

brands/*.brand.css

24 icon (action/nav/status/social) Lucide-style + sprite + Icon component

icons/ · 24 svg + sprite.svg

20 Atom components

Button · Input · Badge · Avatar · Checkbox · Switch · Tooltip · Popover…

react/src/atoms/ · 20 tsx + 20 md

02

Composites

Molecules + Organisms — components phức hợp xây trên atom. Có docs API + variants + states cho mỗi cái.

Part A · 10 Molecules

Accordion · Banner · Breadcrumb · Card · Dropdown · FormGroup · Pagination · SearchBar · Tabs · Toast — live demo + variants + states.

showcase/02-composites-a.html

Part B · 10 Organisms + Archetypes + Docs

CmdPalette · DataTable · Drawer · FAQ · Hero · KPI · Modal · Navbar · Pricing · Sidebar — plus 6 archetypes + 20 per-component docs.

showcase/02-composites-b.html

shadcn cross-ref

40-row mapping Cowork ↔ shadcn/ui ↔ Radix ↔ HeroUI v3. API diff notes.

MAPPING-SHADCN.md

6 Archetype templates

A Dashboard · B Tool · C Landing · D Editorial · E Deck · F PWA — full page reference

pages/page-A → F

Brand swap demo

7 brand × 7 demo type. Switch brand qua CSS var, không touch code.

brands/index.html

React lib (40 component)

Production-ready TS, 0 hex literal, brand-aware via context, Tailwind preset bundled

03

Data visualization

KPI cards, charts, activity feeds, tables. Dùng cho archetype A (Dashboard) và B (Tool).

4 KPI card với sparkline · delta % · period compare · tabular nums

blocks/A-dashboard/kpi-grid.html

SVG area chart 3-channel + period selector segmented + hover guide + legend

blocks/A-dashboard/chart-card.html

Timeline 8-item grouped by date · avatar + action + status pill + relative time

blocks/A-dashboard/activity-feed.html

Data table rows

Sticky header + 8 rows + checkbox + status pill + kebab menu + pager

blocks/A-dashboard/data-row-table.html

Search + date pill + filter dropdowns + view toggle + export CTA

blocks/A-dashboard/filter-bar.html

KPICard component

React organism wrap KPI pattern · variants + a11y + responsive docs

react/src/organisms/KPICard.md

04

Patterns

Mobile-first patterns, auth flows, empty/error states, layout blocks. Cho archetype C/D/E/F.

Mobile layer (8 pattern)

Bottom sheet · OTP · swipe-action · pull-refresh · sticky CTA · segmented · week strip · tab bar

mobile/patterns/

Auth flow (4 page)

Login · Signup · Password reset · OTP verify — social buttons + strength meter

blocks/_states/login.html…

Empty + Error states

No data · No search result · 404 · Loading skeleton — all 8 token-only

blocks/_states/

Landing blocks (7)

Hero × 3 variant · Features grid · Pricing 3-tier · Testimonials · FAQ + Footer

blocks/C-landing/

Editorial blocks (6)

Article header · Pull quote · Author bio · Related posts · Series TOC · Newsletter

blocks/D-editorial/

Deck slides (6)

Title · Big stat · Comparison · Timeline · Quote · Closing — 16:9 aspect

Tool blocks (5)

List+detail · Toolbar · Filter sidebar · Empty state · CRUD form

Mobile app flows (4 brand)

An Nhien shop · KHI Pilates · HaoGood restaurant · A-Kryphan reader — 5 screen each

pages/page-F-*-flow.html

05

Design System rules

6 file docs ~14K từ — "luật game" của kit: interaction, usage, a11y, naming, governance, layout.

Interaction Rules

16 sections — duration/easing/hover/modal/drawer/scroll/drag

Usage Guidelines

12 sections — CTA hierarchy · spacing rules · component decision tree

14 sections WCAG 2.1 AA — contrast/keyboard/focus/SR/touch

Naming Convention

11 sections — component/CSS/token/file/folder naming + anti-pattern

14 sections — versioning · changelog · approval flow · AI agent rules

15 sections — breakpoints · containers · 12-col grid · spacing · sticky