Ledger UI

A comprehensive design system for building enterprise applications, built on React 18/19 and Ant Design 5 with Metronic parity.

What is Ledger UI?

Ledger UI is a monorepo of design tokens, themes, UI components, page templates, internationalization, and accessibility utilities. It provides everything needed to build consistent, high-quality application interfaces.

301 tests across 8 packages — 53+ components, 9 hooks, 15 page templates, 8 layout variants.

About GTCX

GTCX is cryptographic verification infrastructure that replaces document-based trade compliance with algorithmic proof — enabling same-day market access for commodity producers. Ledger UI is the design system for the GTCX ecosystem.

Design Ethos (Global South First)

Ledger UI is built for real operating conditions in emerging markets and regulated trade:

• Global South first — resilient on low bandwidth and intermittent connectivity
• Inclusion first — accessible, tech‑literacy‑aware interfaces by default
• Trust by design — proof‑forward UX with audit trails and evidence always visible

Read more in Design Ethos and Design Principles.

Packages

Quick Start

pnpm add @gtcx/tokens @gtcx/theme @gtcx/ui

import { GtcxConfigProvider } from '@gtcx/theme';
import { Header, Button, Card } from '@gtcx/ui';
 
function App() {
  return (
    <GtcxConfigProvider>
      <Header user={{ name: 'Jane', email: 'jane@example.com' }} />
      <Card>
        <Button variant="primary">Get Started</Button>
      </Card>
    </GtcxConfigProvider>
  );
}

Design Philosophy

Sovereign Minimalism — calm, authoritative interfaces with high legibility and predictable interactions. Built for the Global South first, Inclusion first, and Trust by design.

Implementation Stack

• Ant Design 5 as the component foundation
• Metronic parity for layout and interaction patterns
• Token-driven theming through @gtcx/tokens and @gtcx/theme

What You'll Find Here

• Getting Started — Installation, project structure, and first steps
• Playbooks — Task-first guides (dashboards, review flows, user management)
• Components — Full component library with API documentation
• Customization — Tokens, theming, dark mode, and RTL support
• Layouts — 8 layout variants covering all application shell patterns
• Design Ethos — Global South first, inclusion, and trust by design
• Design Principles — The system rules that guide every component
• Reference — Roadmap, ADRs, changelog, and architecture decisions

Task-First Entry Points