Reference
Metronic Mapping

Metronic Component Mapping

How Metronic components map to Ledger UI equivalents.

Navigation

MetronicLedger UIPackage
KTMenu (vertical)SideNav@gtcx/ui
KTMenu (horizontal)NavigationMenu@gtcx/ui
Mega MenuMegaMenu@gtcx/ui
BreadcrumbsBreadcrumbs@gtcx/ui
TabsTabs@gtcx/ui
ToolbarToolbar@gtcx/ui
Dropdown MenuDropdownMenu@gtcx/ui
Context MenuContextMenu@gtcx/ui
MenubarMenubar@gtcx/ui
Command PaletteCommand@gtcx/ui

Layout

MetronicLedger UIPackage
Layout (all 10 demos)MetronicLayout@gtcx/ui
Header / TopbarHeader@gtcx/ui
SidebarBuilt into MetronicLayout@gtcx/ui
Page HeaderTemplateFrame@gtcx/templates
SeparatorSeparator@gtcx/ui
Scroll AreaScrollArea@gtcx/ui

Data Display

MetronicLedger UIPackage
DataTableAdvancedTable@gtcx/ui
CardCard + CardContent@gtcx/ui
BadgeBadge@gtcx/ui
AvatarAvatar@gtcx/ui
SkeletonSkeleton@gtcx/ui
KPI CardKpiCard@gtcx/templates

Forms

MetronicLedger UIPackage
ButtonButton@gtcx/ui
InputInput@gtcx/ui
SelectSelect@gtcx/ui
CheckboxCheckbox@gtcx/ui
SwitchSwitch@gtcx/ui
ToggleToggle / ToggleGroup@gtcx/ui
Radio GroupRadioGroup@gtcx/ui
TextareaTextarea@gtcx/ui
File UploadFileUpload@gtcx/ui
CalendarCalendar / DatePicker@gtcx/ui
FormForm / Form.Item@gtcx/ui

Feedback

MetronicLedger UIPackage
AlertAlert@gtcx/ui
ModalDialog@gtcx/ui
Confirm DialogAlertDialog@gtcx/ui
DrawerSheet@gtcx/ui
TooltipTooltip@gtcx/ui
PopoverPopover@gtcx/ui
AccordionAccordion@gtcx/ui
Toasttoast@gtcx/ui

Templates

Metronic Page TypeLedger UIPackage
DashboardDashboardTemplate@gtcx/templates
List / Table PageListTemplate@gtcx/templates
Detail PageDetailTemplate@gtcx/templates
Multi-step FormWizardTemplate@gtcx/templates
Settings PageSettingsTemplate@gtcx/templates
Auth PagesAuthShell@gtcx/templates
Error PagesErrorPageTemplate@gtcx/templates

Bridge Architecture

Components use a 4-point bridge pattern:

  1. Import — Ant Design primitive
  2. Wrap — React.forwardRef with typed props
  3. Map — Props mapped to Ant Design API
  4. Export — Clean public API from @gtcx/ui
Changelog