A free React admin dashboard built on Ant Design v6 — without the meta-framework.
Status: beta. Phases 1 and 2 are complete — all 24 Ant Design Pro routes, plus Theme Studio, a command palette, visual RBAC and eight pages Pro has no equivalent for. Next: bilingual docs site. See the roadmap.
 Dark mode — three states, not two: explicit light, explicit dark, and the system default that stamps nothing. |
 Theme Studio — edit antd tokens live, with the WCAG contrast ratio beside the picker. |
 DataTable — server-side paging, sorting and faceted filters, with a hardened CSV export. |
 Visual access control — flip a checkbox and the sidebar, palette and route guards all follow. |
 ⌘K command palette — subsequence matching over every route and setting. |
 Kanban — drag with a pointer or the keyboard. |
 Chinese is not a translation layer — Han glyphs get their own type scale. |
 Every screen is reviewed in four states: light/dark × EN/ZH. |
Ant Design Pro is the official admin template, and it's good. But using it means adopting
@umijs/max — its build scripts are literally max dev and max build.
If your team already knows Vite, that's a whole meta-framework to learn to get a dashboard.
There's a second problem. ProComponents — ProTable, ProForm, ProLayout — is what makes
Pro Pro, and its npm state today is:
| dist-tag | version | published | declared antd support |
|---|---|---|---|
latest |
2.8.10 | 2025-07-17 | antd 4 / 5 only |
beta |
3.1.14-6 | 2026-07-29 | antd ^6.0.0 |
npm i @ant-design/pro-components installs a package that does not declare antd v6 support and
has had no stable release in 13 months. Ant Design Pro works around this by pinning a prerelease.
Colony takes no dependency on ProComponents. No prereleases in the tree.
| Build | Vite 8 (Rolldown) |
| UI | Ant Design 6 |
| Language | TypeScript 6, strict |
| Router | React Router 8 |
| Server state | TanStack Query 5 |
| Tables | antd Table + a toolbar layer |
| Forms | React Hook Form + Zod 4 |
| Client state | Zustand 5 |
| Charts | Recharts 3 |
| Mocking | MSW 2 |
| i18n | i18next — en-US and zh-CN, both first-class |
| Tests | Vitest 4 (59) · Playwright (123) |
pnpm create colony-admin my-app
cd my-app && pnpm install && pnpm devOr clone the repository directly:
git clone https://github.com/ColorlibHQ/colony.git
cd colony
pnpm install
pnpm dev # http://localhost:5273Full documentation, in English and Chinese: colony.colorlib.com
pnpm build # typecheck + production build
pnpm test # unit tests
pnpm lint # eslintMeasured as gzip transferred on first paint, in a headless Chromium against each project's own public demo:
| JS on first paint | |
|---|---|
Colony — heaviest route (/dashboard/analysis) |
509 kB |
Colony — /auth/login |
330 kB |
| Ant Design Pro | 1,178 kB |
| design-sparx (the 273-star alternative) | 763 kB |
| soybean-admin (Vue + Naive UI) | 603 kB |
| vue-vben-admin (Vue) | 312 kB |
CI enforces a gzip budget (pnpm size) and fails the build if it is exceeded.
MSW is excluded from pnpm build — use pnpm build:demo for a build with the
mock API, which is what the hosted demo runs.
zh-CN is authored, not machine-translated, and CI fails if an English key lands without its
Chinese pair. Typography carries two parallel metric scales — Han glyphs need more leading and
less tracking than Latin, so tokens.css swaps line-height, letter-spacing and the font stack
off :root:lang(zh). Every screen is reviewed in four states: light/dark × EN/ZH.
- Phase 0 — foundation: tokens, theming, i18n, shell, CI
- Phase 1 — parity with all 24 Ant Design Pro routes
- Phase 2 — Theme Studio · command palette · visual RBAC · 8 pages Pro lacks
- Phase 3 — bilingual docs site, scaffold CLI (Gitee mirror pending)
- Phase 4 — 1.0
MIT © Colorlib