File Structure
ledger-ui/
packages/
tokens/ Design tokens (primitives, semantic, dark theme)
theme/ Ant Design ConfigProvider, createAntdTheme()
utils/ cn(), debounce(), throttle(), timeAgo(), DOM helpers
ui/ 53+ React components + 9 hooks
templates/ 15 page templates (Dashboard, List, Detail, etc.)
i18n/ Translation engine, 29 languages, RTL
accessibility/ WCAG contrast, focus trap, tech literacy
design-system/ Meta-package re-exporting tokens + theme
gallery/ Vite app — MetronicLayout variant switcher demo
storybook/ Storybook 8 — stories for all components
parity/ Standalone Metronic layout reference (Tailwind)
demo/ Metronic v9.4.2 demo source (read-only reference)
docs-site/ This documentation site (Nextra)
docs/ Architecture docs, ADRs, specs, component mapping
scripts/ CI utilities (bundle size + Storybook coverage checks)
.github/workflows/ CI/CD pipeline (lint, test, build, Chromatic)Package Structure
Each package follows a consistent structure:
packages/ui/
src/
components/
navigation/ SideNav, Toolbar, Breadcrumbs, MegaMenu, etc.
data/ AdvancedTable, Card, Badge, Avatar, Skeleton
forms/ Button, Input, Select, Checkbox, Switch, etc.
feedback/ Alert, Dialog, Sheet, Tooltip, Accordion, etc.
layout/ Header, Separator, ScrollArea, MetronicLayout
effects/ GlassmorphismCard
ai/ AIInsightCard
hooks/ useBreakpoint, useResponsive, etc.
bridge/ Metronic compatibility layer (ui/, lib/, hooks/)
index.ts Public API barrel export
tests/ Vitest test files
dist/ Built output (CJS + ESM + types)
tsup.config.ts Build configuration
vitest.config.ts Test configurationBuild Order
Packages must build in dependency order:
tokens → theme → utils → ui → templates → i18n → accessibility → design-systemTurbo handles this automatically via dependsOn: ["^build"] in turbo.json.