@gtcx/layouts
v0.2.9
Published
GTCX layout shells — 39 Metronic layout variants
Downloads
908
Readme
@gtcx/layouts
39 production-ready application shell layouts for the GTCX design system. 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)
Full gallery: ledger.gtcxprotocol.org/docs/layouts
Requirements
- React 18 or 19
- Next.js ≥ 14
- Node.js ≥ 20