Getting Started
Starter Kits

Starter Kits

Ledger UI provides ready-to-use application shells through the MetronicLayout component. Choose a layout variant and start building immediately.

Quick Start with MetronicLayout

import { MetronicLayout } from '@gtcx/ui';
import type { MetronicMenuConfig } from '@gtcx/ui';
 
const menu: MetronicMenuConfig = [
  {
    heading: 'Main',
    items: [
      { title: 'Dashboard', path: '/', icon: 'LayoutGrid' },
      { title: 'Users', path: '/users', icon: 'Users' },
    ],
  },
];
 
function App() {
  return (
    <MetronicLayout
      variant="sidebar"
      menu={menu}
      logo={<span>My App</span>}
      headerUser={{ name: 'Jane Doe' }}
    >
      <YourPageContent />
    </MetronicLayout>
  );
}

Available Layout Variants

VariantBest For
sidebarGeneral-purpose admin apps
horizontalWide dashboard views
mini-sidebarDense navigation with many sections
card-sidebarVisual separation between nav and content
content-sidebarDocument-style apps with tab navigation
top-onlySimple apps with minimal navigation
mega-menuComplex apps with deep navigation hierarchies
dark-sidebarDark-themed professional apps

With Page Templates

Combine a layout variant with a page template for complete pages:

import { MetronicLayout } from '@gtcx/ui';
import { DashboardTemplate } from '@gtcx/templates';
 
function DashboardPage() {
  return (
    <MetronicLayout variant="sidebar" menu={menu} logo={logo}>
      <DashboardTemplate
        title="Dashboard"
        data={{
          kpis: [{ key: 'revenue', label: 'Revenue', value: '$124K', trend: 'up', delta: '+12%' }],
          panels: [{ key: 'chart', title: 'Overview', content: <Chart /> }],
        }}
      />
    </MetronicLayout>
  );
}

See Layouts for detailed documentation on each variant.

File StructureMulti-Demo