Demo Applications

Ledger UI includes multiple demo applications for testing and validating the design system.

Gallery App

The primary demo application with a runtime variant switcher for all 8 layout variants.

pnpm --filter @gtcx/gallery dev

Features:

• Switch between all 8 MetronicLayout variants at runtime
• Full sidebar menu with nested items
• Header with user menu and notification badge
• Visual indicator for current layout and path

Storybook

Interactive component documentation with 56 stories across all component groups.

pnpm --filter @gtcx/storybook dev

Features:

• Stories for all 47+ components
• 13 MetronicLayout stories (one per variant + variations)
• Interactive controls for prop exploration
• Accessibility addon (axe) for automated a11y checks
• Template stories with mock data

Parity Reference

A standalone Tailwind-based reproduction of Metronic Layout 5 for visual comparison.

pnpm --filter @gtcx/parity dev

This app uses raw Tailwind CSS (no @gtcx/ui) to faithfully reproduce the Metronic demo. Use it as a visual reference when validating layout parity.

Metronic Demo Source

The original Metronic v9.4.2 demo source is preserved in demo/ as a read-only reference. All 10 layout variants are available:

pnpm --filter @gtcx/demo dev    # Runs on localhost:3010

Navigate to /layout-1 through /layout-10 to see each variant.