Xây Design System Enterprise với shadcn/ui & Radix UI

Tại sao doanh nghiệp cần Design System?

Nhất quán thương hiệu và trải nghiệm người dùng

Khi sản phẩm mở rộng, mỗi squad thường “tự chế” UI để chạy deadline, dần dẫn tới giao diện chắp vá, màu nút khác nhau, hành vi focus-ring thiếu nhất quán. Một design system tập trung token hoá màu sắc, typography, khoảng cách… khiến mọi app tuân theo cùng một “ngôn ngữ thiết kế”, bảo toàn dấu ấn thương hiệu và giảm lỗi “UX surprise” cho end-user.

Tăng tốc độ triển khai và giảm chi phí

Theo nghiên cứu của IBM, các nhóm áp dụng phương pháp “hybrid-by-design” (design system + tooling) đạt ROI gấp 3 lần trong 5 năm so với nhóm không chuẩn hoá. Công thức ROI của Smashing Magazine chỉ ra cứ mỗi component tái sử dụng, bạn tiết kiệm từ 8-10 giờ phát triển và review. Sparkbox cũng đo được năng suất dev tăng 47 % khi có thư viện sẵn.

Cải thiện chất lượng, accessibility và testability

Design system bắt buộc checklist WCAG, yêu cầu viết test đồng đều, nhờ đó giảm lỗi a11y lọt QA. Vì component được dùng lại, chỉ cần sửa bug ở 1 nơi để vá trên toàn bộ sản phẩm, giảm technical debt rõ rệt.

Tổng quan shadcn/ui & Radix UI

Radix UI – Accessible React primitives

Radix cung cấp các primitive “unstyled” như Dialog, Tooltip, Scroll-area… đã pass kiểm thử keyboard, ARIA role và focus trap. Vercel, Supabase, Linear lựa chọn Radix để tránh “đạp vào vết xe” accessibility, chỉ tập trung skin theo brand.

// Ví dụ Radix Dialog base
import * as Dialog from "@radix-ui/react-dialog";

export function ConfirmDelete() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button className="btn-danger">Delete</button>
      </Dialog.Trigger>

      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/40" />
        <Dialog.Content className="bg-white p-6 rounded-xl shadow-lg">
          <Dialog.Title>Xác nhận xoá</Dialog.Title>
          <Dialog.Description>
            Bạn chắc chắn muốn xoá bản ghi này?
          </Dialog.Description>

          <div className="mt-4 flex justify-end gap-2">
            <Dialog.Close asChild>
              <button className="btn-outline">Huỷ</button>
            </Dialog.Close>
            <button className="btn-danger">Xoá</button>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

Chỉ cần wrap thêm lớp style Tailwind là có ngay component production-ready với chuẩn a11y.

shadcn/ui – “Copy code, own code”

shadcn/ui định nghĩa triết lý: “This is NOT a component library. It’s a collection of re-usable components that you can copy and paste into your apps. The code is yours.” Thay vì cài từ npm, bạn lấy CLI:

npx shadcn-ui@latest init    # khởi tạo token + config
npx shadcn-ui@latest add button

Kết quả là mã nguồn Button.tsx xuất hiện trong repo, bạn toàn quyền refactor, thêm test, đổi style tùy ý — đúng với yêu cầu enterprise về kiểm soát code và security audit.

Radix Themes vs shadcn/ui vs Headless UI (tóm tắt nhanh)

• Radix Themes: Skinnable default theme, ship sẵn style; nhanh POC nhưng khó “fork sâu”.
• shadcn/ui: Layer style trên Radix primitives, copy vào repo, tự chủ 100 %.
• Headless UI: Primitives cho Vue/React bị ràng buộc Tailwind variant, số lượng component ít hơn Radix.

Khi mục tiêu là design system enterprise cần tuỳ biến triệt để, shadcn/ui + Radix primitives giữ cân bằng tốt giữa accessibility (của Radix) và quyền sở hữu mã (của shadcn).

Lên kế hoạch kiến trúc Design System Enterprise

1. Định nghĩa tầm nhìn & phạm vi

• Design Principles: ví dụ “Accessible by default”, “Performance first”.
• Success Metrics: thời gian build screen mới, tỷ lệ bug UI/a11y, adoption rate.
• Stakeholder Map: team design, frontend, backend, QA, product owner.

2. Phân lớp kiến trúc

packages/
  tokens/            # design tokens JSON
  primitives/        # Radix wrappers + a11y test
  components/        # shadcn components đã style-hóa
  patterns/          # flows lớn: AuthForm, DataTable...
  docs/              # Storybook, MDX, playground

• Tokens (màu, spacing, radius…) được build bằng Style Dictionary.
• Primitives giữ API gốc Radix + hook nội bộ (useTheme).
• Components export variant props, sử dụng Tailwind Variant.
• Patterns kết hợp nhiều component thành flow hoàn chỉnh.

3. Governance & versioning

• RFC workflow: mỗi thay đổi lớn tạo PR ở thư mục /rfc để toàn team review.
• SemVer: major khi phá vỡ API, minor cho feature mới, patch cho bug fix.
• Automation: GitHub Actions lint-test-build; Chromatic visual diff trên mỗi PR; auto-publish package nội bộ. Bảng lộ trình, changelog chuẩn Conventional Commits giúp team backend biết version nào an toàn nâng cấp.

Bước chuẩn bị kiến trúc bài bản sẽ giúp hệ thống sống khoẻ nhiều năm, tránh “design-system-drift” và thuyết phục lãnh đạo nhờ số liệu ROI rõ ràng.

Chuẩn bị môi trường & cấu trúc repo mono-repo

Vì sao nên dùng mono-repo?

• Share code & version: design-tokens, primitives, components, docs luôn đồng bộ, tránh mismatch.
• Single CI/CD pipeline: build/test/lint một lần, cache cho toàn bộ packages.
• Atomic PR: một thay đổi token → rebuild tất cả consumer package ngay trên CI, giảm “integration surprise”.

Chọn công cụ: Turborepo + pnpm

Turborepo hỗ trợ incremental build cache, remote cache qua Vercel hoặc Redis, tương thích pnpm workspace lockfile.

# Khởi tạo workspace
pnpm init
pnpm add -w -D turbo typescript eslint prettier

# turbo.json (rút gọn)
{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] },
    "lint":  { "outputs": [] },
    "test":  { "dependsOn": ["build"], "outputs": [] }
  }
}

Mỗi package khai báo "build" script để Turbo hiểu dependency graph.

packages/
  tokens/            # JSON/YAML design-tokens
  primitives/        # React + Radix wrappers
  components/        # shadcn-ui component đã style-hoá
  docs/              # Storybook + MDX
  config/            # tailwind, eslint, tsconfig base
apps/
  docs-site/         # Next.js hiển thị Storybook, playground
  internal-app/      # App pilot dùng design system

• tokens publish ở version 1.x, downstream locked vào caret ^1.0.0.
• config tránh lặp lại Tailwind & ESLint giữa các package.

Thiết lập CI/CD GitHub Actions

name: ci
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - run: pnpm install --frozen-lockfile
      - run: pnpm turbo run lint test build --cache-dir=".cache"
      - uses: actions/upload-artifact@v4
        with: { name: dist, path: "**/dist" }

Cache Turbo giúp giảm 70-90 % thời gian build cho PR tiếp theo.

Thiết kế Design Tokens & hệ thống theme

Các lớp token cần có

Lớp	Ví dụ	Ghi chú
Core / Global	--radius-xs, --font-size-base	Không đổi giữa brand
Semantic	--color-text-primary, --color-bg-surface	Map tới core theo theme
Component	--btn-primary-bg, --avatar-ring	Dễ nâng cấp riêng lẻ

Quản lý bằng Style Dictionary

tokens/global/color.json

{
  "brand": {
    "primary": { "value": "#2563eb" },
    "secondary": { "value": "#6366f1" }
  },
  "neutral": {
    "100": { "value": "#f5f5f5" },
    "900": { "value": "#111827" }
  }
}

scripts/build-tokens.ts

import StyleDictionary from "style-dictionary";

StyleDictionary.extend({
  source: ["tokens/**/*.json"],
  platforms: {
    css: {
      transformGroup: "css",
      buildPath: "dist/",
      files: [{ destination: "tokens.css", format: "css/variables" }]
    }
  }
}).buildAll();

Chạy pnpm build:tokens xuất tokens.css rồi import trong tailwind.config.ts bằng plugin @shadcn/tokens.

Hỗ trợ đa thương hiệu & dark-mode

• Tạo branch token brand-foo, xuất file foo.css.
• Runtime switch bằng data-theme="foo-dark" trên <html>.
• Với Radix Color, chỉ cần map hue vào token semantic, bảo đảm đủ 11 step sáng-tối cho A11y.

Xây dựng Base Primitives với Radix UI

Nguyên tắc

1. Giữ API gốc: không đổi prop name Radix để dev dễ tra cứu docs chính.
2. Inject token: style bằng Tailwind class hoặc CSS vars, KHÔNG inline style.
3. Export forwardRef: bảo toàn type & ref cho composability.

Ví dụ: Button Primitive

import * as React from "react";
import * as Primitive from "@radix-ui/react-slot";
import { cn } from "@/lib/utils";                 // helper merge class

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "ghost";
  asChild?: boolean;                             // hỗ trợ Slot
}

export const Button = React.forwardRef<
  HTMLButtonElement,
  ButtonProps
>(({ variant = "primary", className, asChild, ...props }, ref) => {
  const Comp = asChild ? Primitive.Slot : "button";
  return (
    <Comp
      ref={ref}
      className={cn(
        "inline-flex items-center justify-center rounded-lg text-sm font-medium",
        variant === "primary" && "bg-brand-primary text-white hover:bg-brand-primary/90",
        variant === "secondary" && "bg-neutral-100 hover:bg-neutral-200",
        variant === "ghost" && "hover:bg-neutral-100",
        "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-primary",
        className,
      )}
      {...props}
    />
  );
});
Button.displayName = "Button";

Giải thích

• asChild dùng Radix <Slot> cho phép wrap Button quanh <a> hoặc <Link>, không mất style.
• Tất cả màu lấy từ token --brand-primary, dễ đổi theme.
• Class focus-visible:outline-... giúp đạt WCAG 2.2 ngay cả với ghost button.

Thêm Tooltip primitive

import * as TooltipPrimitive from "@radix-ui/react-tooltip";

export const Tooltip = ({ children, content }: { children: React.ReactNode; content: string }) => (
  <TooltipPrimitive.Root>
    <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        sideOffset={4}
        className="z-50 rounded-md bg-neutral-900 px-3 py-1.5 text-xs leading-none text-white shadow-md"
      >
        {content}
        <TooltipPrimitive.Arrow className="fill-neutral-900" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  </TooltipPrimitive.Root>
);

Không cần viết logic focus-trap – Radix đã lo, chỉ style lớp ngoài.

Testing & a11y checklist

• Unit: render Button variants, assert role=”button”, disabled state.
• a11y: @testing-library/jest-dom + jest-axe để fail khi Button thiếu label.
• Integration: Storybook test-runner chạy tự động Axe trên mỗi story.

Với chiến lược “primitives trước, components sau”, bạn bảo đảm mọi layer cao hơn đều thừa hưởng API consistent & accessible.

Scaffold & tuỳ biến component với shadcn/ui

1. Cài đặt CLI và thêm component

shadcn/ui cung cấp CLI “copy-code-into-repo”, nghĩa là mỗi component trở thành source-of-truth trong chính repository enterprise của bạn.

# Bật lên cấu hình cơ bản (Tailwind, tsconfig alias…)
npx shadcn-ui@latest init

# Thêm một component bất kỳ
npx shadcn-ui@latest add card

CLI sẽ:

1. Tải mã nguồn gốc từ template.
2. Chèn vào components/ui/ kèm CSS biến hóa sẵn cho Tailwind.
3. Tự động import token (màu, radius) đã build ở bước 5.

Ưu điểm lớn: bạn git blame được mọi thay đổi, dễ audit bảo mật khi bị yêu cầu SOC2/ISO 27001.

2. Refactor để tuỳ biến theo design system

Sau khi scaffold, hãy chuyển các giá trị hard-code sang token hoặc prop variant:

// components/ui/card.tsx
import { cn } from "@/lib/utils";

export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "elevated" | "outline";
}

export function Card({ variant = "elevated", className, ...props }: CardProps) {
  return (
    <div
      className={cn(
        "rounded-xl bg-surface text-sm",
        variant === "elevated" && "shadow-md",
        variant === "outline" && "border border-outline",
        className
      )}
      {...props}
    />
  );
}

• bg-surface, border-outline là CSS vars sinh từ design tokens
• Thêm prop variant giúp Storybook Control hiển thị toggle để designer preview ngay.

3. Mẫu kiểm thử snapshot + Axe

import { render } from "@testing-library/react";
import { Card } from "./card";
import { axe } from "jest-axe";

it("renders elevated card accessible", async () => {
  const { container } = render(<Card variant="elevated">Hello</Card>);
  expect(await axe(container)).toHaveNoViolations();
});

Thiết lập Figma Kit đồng bộ

1. Import Shadcn UI Kit for Figma

• Duplicate file “Shadcn UI Figma Kit” về team project.
• Bật Dev Mode để copy props dễ dàng.

2. Mapping token Figma ↔ Code

Figma Style	Token Code	Ghi chú
Color/Brand/Primary/600	--brand-primary	Giữ 6-digit HEX
Radius/XL	--radius-xl	Giá trị 1rem
Elevation/4	--shadow-m	Spread blur theo scale

Plugin Tokens Studio (trước là “Figma Tokens”) giúp:

1. Kéo token JSON về tokens/figma.json.
2. Hook vào GitHub Action, mỗi khi designer đổi màu → PR tự cập nhật.

3. Quy tắc đặt tên component

• Button/Primary/Large → gắn với Button variant="primary" size="lg".
• Icon/24/Outline trùng khớp folder components/icons/24 để codegen TypeScript icon set.

Đồng bộ chặt chẽ giữa Figma và repo làm giảm design drift và tăng độ tin cậy khi review.

Automated Testing & Accessibility

1. Unit & integration test

• React Testing Library + Jest cho logic, props contract.
• Vitest nếu muốn chạy cực nhanh với ESM.
• Viết hook renderWithTheme() để bọc Provider theme mặc định.

import { render, screen } from "@/test/utils";
import { Button } from "../button";

it("calls onClick once", () => {
  const handle = vi.fn();
  render(<Button onClick={handle}>Save</Button>);
  screen.getByRole("button", { name: /save/i }).click();
  expect(handle).toHaveBeenCalledTimes(1);
});

2. Visual regression

• Storybook + Chromatic: mỗi PR đẩy lên, Chromatic so ảnh pixel-diff; fail khi lệch >0.1 %.
• Percy là lựa chọn khác nếu self-host.

package.json

{
  "scripts": {
    "storybook": "storybook dev",
    "build-storybook": "storybook build",
    "test:visual": "percy storybook:serve -- -p 6006"
  }
}

3. Accessibility pipeline

Công cụ	Mục tiêu	Thời điểm chạy
jest-axe	Unit a11y	npm test
Storybook @storybook/test-runner	Component a11y	PR check
cypress-axe	End-to-end	Nightly build

CI GitHub Action (trích đoạn):

- name: Accessibility
  run: pnpm test && pnpm storybook:test

4. KPI a11y & chất lượng

• Lighthouse score ≥ 95 trên mỗi page pilot.
• 0 lỗi critical Axe sau merge.
• Coverage component: ≥ 90 % story đã bật test-runner.

Thiết lập kiểm thử tự động ngay từ đầu giúp design system “khỏe” khi scale lên hàng trăm component, đồng thời chứng minh với leadership rằng chất lượng UI được đo lường định lượng, không cảm tính.

Performance & Tree-shaking

1. Loại bỏ dead-code ngay trong package design system

• Rollup + tsup: đặt treeshake: true, minify: true, dts: true khi build từng package primitives và components.
• Khai báo "sideEffects": false trong package.json để Webpack/Vite hiểu file nào không có tác dụng phụ và mạnh dạn cắt bỏ.
• Tránh export * (nặng tree-shake). Thay vào đó:

// packages/components/src/index.ts
export { Button } from "./button";
export { Card }   from "./card";

Khi product app import { Button } from "@acme/design-system";, bundler chỉ pull đúng file cần − giảm ~40 % bundle size qua kiểm chứng với Webpack 5 tree-shaking .

2. Split-chunk và lazy-load ở consumer app

// app/page.tsx
const DataTable = React.lazy(() => import("@acme/design-system/DataTable"));

export default function Page() {
  return (
    <React.Suspense fallback={<Spinner />}>
      <DataTable />
    </React.Suspense>
  );
}

• Các component “nặng” như DataTable, Chart được tải sau, FCP giảm 150-200 ms trong đo Lighthouse .

3. Kiểm soát CSS với Tailwind “content” scan

• Trong tailwind.config.ts chỉ định pattern "./packages/**/*.{ts,tsx,mdx}" và bật mode: "jit" → purge chính xác, tránh ship 500+ kB class thừa.
• Dùng plugin @tailwindcss/animate (chỉ class animate được dùng).

4. Theo dõi performance liên tục

Công cụ	Mục tiêu	Ghi chú
Bundlephobia CI	Cảnh báo size tăng >5 %	Hook vào PR
Lighthouse CI	TTI, CLS, FCP	Threshold >90
Source-map-explorer	Audit tree-shake	Weekly bot report

Tài liệu & Playground nội bộ

1. Storybook 8 đa package

• Bật Storybook composition để merge các Storybook của primitives và components vào một UI duy nhất.
• Add-on quan trọng: @storybook/addon-interactions, addon-a11y, addon-designs (embed Figma frame bên phải).

// .storybook/main.js
module.exports = {
  stories: ["../packages/**/src/**/*.stories.@(mdx|tsx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-addon-designs",
  ],
  framework: "@storybook/react-vite",
};

2. MDX docs live-code

• Viết hướng dẫn API ngay cạnh component với import { Playground } from "storybook-addon-playground".
• Designer/dev có thể chỉnh props realtime; code snippet auto-update → tăng adoption.

3. Next.js docs-site cho production

• Sử dụng nextra phát nhanh docs tĩnh, import Storybook iframe hoặc <Sandpack> để demo tương tác.
• Build pipeline xuất HTML tĩnh, chạy trên Cloudflare Pages, cache edge thành 50 ms TTFB.

4. Autogen bảng props & changelog

• react-docgen-typescript quét type → markdown table.
• GitHub Action “release-please” sinh CHANGELOG.md SemVer, embed vào docs-site — team backend đọc nhanh API breaking.

Chiến lược triển khai & Adopt trong doanh nghiệp

1. Pilot nhỏ, đo lường rõ

1. Chọn một internal app ít rủi ro (thường là admin dashboard).
2. Thay thế từng bước: token → primitive → component → pattern.
3. Thiết lập baseline metrics: số dòng CSS tùy chỉnh, số lỗi UI, thời gian build screen.

Sau 3 sprint, nhóm tại Supabase báo giảm 37 % CSS custom và build screen mới nhanh hơn 2.1× .

2. Communicate & training

• Workshop 2h: “How to use Button, Card, Theme Switcher” cho frontend.
• Pair-design giữa designer và dev để tạo component mới, ghi guideline ngay vào Storybook.
• Slack channel #design-system-help + office-hour hàng tuần.

3. Governance rollout

Giai đoạn	Mục tiêu	Yêu cầu gate
Alpha (2 tuần)	Primitive + token stable	≥90 % unit test pass
Beta (1 tháng)	15 component ready	Docs Storybook đầy đủ
GA	Adopt ≥70 % repo frontend	Lighthouse ≥90, a11y 0 lỗi

4. Success metrics để trình lãnh đạo

• Time-to-Market: giảm ≥30 % so sprint trước.
• Bug UI: giảm ≥50 % ticket UI/Jira.
• Adoption rate: số repo import @acme/design-system / tổng.

Khi số liệu rõ ràng, leadership dễ duyệt thêm budget để duy trì đội Design System Guild toàn thời gian.

Bảo trì, Versioning & Governance

1. Quy trình release chuẩn SemVer

• major (x.0.0) – thay đổi phá vỡ API (component đổi prop, token bị xoá).
• minor (0.x.0) – thêm component, thêm token, không breaking.
• patch (0.0.x) – sửa bug, tối ưu style, cập nhật a11y.

Mỗi package (tokens, primitives, components) có CHANGELOG.md sinh tự động bởi release-please + Conventional Commits. Khi merge vào nhánh main, bot:

1. Bump version thích hợp.
2. Tag Git & publish vào NPM private registry.
3. Tạo PR docs cập nhật bảng phiên bản trên docs-site.

Nhờ CI tự động, version sai lệch hầu như biến mất, giảm “update hell” cho các team tiêu thụ.

2. Governance model “Design System Guild”

Vai trò	Nhiệm vụ	Quỹ thời gian
Maintainer	Code-owner, review PR, approve release	25 % / sprint
Contributors	Đề xuất component mới, fix bug	10 % / sprint
DS Lead	Định hướng roadmap, OKR, stakeholder sync	50 %

• RFC board: mọi thay đổi lớn (thêm pattern, đổi token core) tạo file /rfc/2025-xx-slug.md, thảo luận công khai ít nhất 72 h.
• Design review: 2 tuần/lần, designer + dev soi pixel/a11y, chốt guideline.
• Deprecation policy: đánh dấu @deprecated + banner Storybook một phiên bản trước khi xoá hẳn.

3. Monitoring & feedback loop

• Slack bot báo size bundle, lỗi a11y mới, adoption %.
• Survey hàng quý → Net Promoter Score của DS; < 60 → lên kế hoạch cải tiến.
• Rotation “DS On-Call” tuần/lần để xử lý khẩn cấp (bug blocking release).

FAQ & Troubleshooting

Kết luận & Next Steps

• Giá trị cốt lõi: shadcn/ui trao quyền sở hữu mã, Radix UI bảo chứng accessibility – kết hợp thành design system có thể mở rộng, kiểm soát và đo lường được.
• Lộ trình 6 tháng:
  1. Tháng 1–2 – Hoàn thiện token & primitive, pilot dashboard.
  2. Tháng 3–4 – 30 + component, docs-site GA, đo adoption ≥ 50 %.
  3. Tháng 5–6 – Mở rộng mobile web, dark-mode runtime, đóng góp lại OSS (open-sourcing pattern phổ biến).

Tiếp tục theo dõi chỉ số performance, a11y, ROI; khi dữ liệu tích cực, hãy thuyết phục leadership đầu tư dài hạn cho Design System Guild. Đội ngũ sẽ không chỉ “tô màu” mà trở thành bệ phóng cho mọi sản phẩm frontend doanh nghiệp.

Xem thêm:

• Cách tối ưu hiệu suất frontend với lazy load, code splitting, caching
• React là gì? Tổng quan đầy đủ cho lập trình viên 2025
• Next.js 15: Toàn cảnh nâng cấp lớn & hướng dẫn chi tiết

Tài nguyên và liên kết hữu ích

Dưới đây là những tài liệu, repo, blog và công cụ được cộng đồng đánh giá cao, giúp bạn mở rộng kiến thức và triển khai design system enterprise thực chiến với shadcn/ui, Radix UI cũng như các công cụ liên quan:

Official Docs & Starter Kit

• shadcn/ui Documentation Hướng dẫn cài đặt, tuỳ biến component, best practice và mẹo đồng bộ Figma.
• Radix UI Primitives Chi tiết về các primitive React component chuẩn accessibility, các pattern nâng cao và tip xử lý focus, portal…
• Radix Themes Bộ theme style sẵn, phù hợp cho MVP hoặc side-project cần ship nhanh.

Design Token, Tooling & Testing

• Style Dictionary Open source build design token đa nền tảng (CSS/JS/Swift/Android…).
• Figma Tokens Plugin Plugin export/import token giữa Figma và codebase, đồng bộ màu, spacing, font, shadow dễ dàng.
• Storybook Docs Tài liệu Storybook, hướng dẫn viết live-docs, test tự động, visual regression với Chromatic.
• Jest & Testing Library Framework unit test, integration test phổ biến cho React.

Case Study, Blog & Community

• WorkOS: How We Built Our Design System with shadcn/ui Bài phân tích thực tế quy trình adopt shadcn/ui trong môi trường doanh nghiệp, các bài học kinh nghiệm khi scale lên nhiều team.
• Linear’s Radix Migration Story Linear chia sẻ lý do chọn Radix UI, lộ trình chuyển đổi và checklist migration cho enterprise app.
• Radix UI Discord Kênh thảo luận trực tiếp với maintainer, hỗ trợ kỹ thuật nhanh và cập nhật feature mới nhất.

DevOps & CI/CD

• GitHub Actions for Monorepo Thiết lập pipeline lint, test, build, publish cho workspace pnpm + Turborepo.
• Chromatic Visual Testing Công cụ visual regression testing miễn phí cho Storybook.