@gtcx/layouts
v0.2.10
Published
GTCX layout shells — 39 Metronic layout variants
Readme
@gtcx/layouts
39 historical application shell layouts plus emerging canonical Ledger workflow shells. Built on Metronic v9.4.6 with Next.js, React 19, and Tailwind CSS v4.
Install
pnpm add @gtcx/layoutsInstall peer dependencies:
pnpm add react react-dom next lucide-react radix-uiSetup — Next.js
Add to transpilePackages and set up Turbopack source resolution in next.config.mjs:
import path from 'path';
import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const nextConfig = {
transpilePackages: ['@gtcx/ui', '@gtcx/layouts'],
turbopack: {
resolveAlias: {
'@gtcx/layouts': path.resolve(__dirname, 'node_modules/@gtcx/layouts/src/index.ts'),
},
},
};
export default nextConfig;Why source resolution? Turbopack requires
"use client"directives in each file. tsup/esbuild strips them from the bundle. Resolving from source preserves them.
Usage
Basic layout
// app/layout.tsx
import { Layout34 } from '@gtcx/layouts';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Layout34>{children}</Layout34>
</body>
</html>
);
}Custom sidebar
Inject your own navigation via the sidebarContent slot:
import { Layout34 } from '@gtcx/layouts';
import { AppSidebarNav } from '@/components/app-sidebar-nav';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Layout34 sidebarContent={<AppSidebarNav />}>{children}</Layout34>
</body>
</html>
);
}Available layouts
39 layout variants covering:
- Sidebar layouts (fixed, collapsible, mini, icon-only)
- Header layouts (sticky, transparent, mega-menu)
- Combined sidebar + header variants
- Dark sidebar variants
- Layout 34 — collapsible sidebar with sticky header (recommended for most apps)
Canonical Ledger shells
Prefer these before reaching for numbered variants when you are building new enterprise workflows:
ReviewQueueLayout— queue triage, assignment, and operational reviewCaseDetailLayout— entity, case, or record detail with metadata and tabsMobileCaptureLayout— touch-first capture for unstable or interrupted field workAlertTriageLayout— alert queue, detail pane, and analyst railEvidenceCollectionLayout— evidence packet intake, inventory, and verification handoffAdminConfigurationLayout— governed configuration with audit and approval contextEntityProfileLayout— intelligence summary, trust state, and relationship context for one entityWorkspaceCommandCenterLayout— operations control surface for alerts, approvals, and current focusTransactionTimelineLayout— chronological transaction review with linked evidence and dispute contextReviewerWorkbenchLayout— focused reviewer shell for evidence comparison, notes, and final disposition
These shells encode the sanctioned Ledger workflow structure and pair directly with the operational primitives in @gtcx/ui.
Full gallery: ledger.gtcxprotocol.org/docs/layouts
Requirements
- React 18 or 19
- Next.js ≥ 14
- Node.js ≥ 20