@import "@djangocfg/ui-nextjs/styles";
@import "@djangocfg/layouts/styles";
@import "@djangocfg/ui-tools/styles";
@import "@djangocfg/debuger/styles";
@import "tailwindcss";

BaseApp

Core providers wrapper. Use directly when you don't need route-based layout switching.

import { BaseApp } from '@djangocfg/layouts';

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <BaseApp
          project="my-app"
          theme={{ defaultTheme: 'dark', storageKey: 'my-theme' }}
          auth={{ apiUrl: process.env.NEXT_PUBLIC_API_URL }}
          analytics={{ googleTrackingId: 'G-XXXXXXXXXX' }}
        >
          {children}
        </BaseApp>
      </body>
    </html>
  );
}

Props:

Prop	Type	Default	Description
`project`	`string`	—	App name — auto-passed to `MonitorProvider` and debug panel
`theme`	`ThemeConfig`	—	Theme config (defaultTheme, storageKey)
`auth`	`AuthConfig`	—	Auth provider config
`analytics`	`AnalyticsConfig`	—	Google Analytics config
`centrifugo`	`CentrifugoConfig`	—	WebSocket real-time config
`errorTracking`	`ErrorTrackingConfig`	—	Validation/CORS/network error capture
`errorBoundary`	`ErrorBoundaryConfig`	enabled	React error boundary
`swr`	`SWRConfigOptions`	—	SWR data fetching config
`pwaInstall`	`PwaInstallConfig`	—	PWA install prompt
`mcpChat`	`McpChatConfig`	—	AI chat widget
`monitor`	`MonitorConfig`	—	Override monitor config (project/environment come from `project` prop by default)
`debug`	`DebugConfig`	enabled	Debug panel config — see below

Included automatically:

ThemeProvider, TooltipProvider, SWRConfig, DialogProvider
AuthProvider + AuthDialog
AnalyticsProvider, CentrifugoProvider, PwaProvider
ErrorTrackingProvider, ErrorBoundary
MonitorProvider (auto-enabled via project prop)
DebugButton from @djangocfg/debuger
NextTopLoader, Toaster

AppLayout

Smart layout router — selects layout based on current route. Wraps BaseApp, accepts all its props.

import { AppLayout } from '@djangocfg/layouts';
import { PublicLayout } from './_layouts/PublicLayout';
import { PrivateLayout } from './_layouts/PrivateLayout';
import { AdminLayout } from './_layouts/AdminLayout';

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <AppLayout
          project="my-app"
          theme={{ defaultTheme: 'system' }}
          auth={{ apiUrl: process.env.NEXT_PUBLIC_API_URL }}

          publicLayout={{ component: PublicLayout, enabledPath: ['/', '/legal', '/contact'] }}
          privateLayout={{ component: PrivateLayout, enabledPath: ['/dashboard', '/profile'] }}
          adminLayout={{ component: AdminLayout, enabledPath: '/admin' }}

          noLayoutPaths={['/private/terminal', '/embed']}
        >
          {children}
        </AppLayout>
      </body>
    </html>
  );
}

Layout priority: Admin → Private → Public → Fallback

noLayoutPaths — render without layout wrapper (providers still active). Useful for fullscreen pages.

i18n

import { useLocaleSwitcher } from '@djangocfg/nextjs/i18n/client';

const { locale, locales, changeLocale } = useLocaleSwitcher();

<AppLayout
  i18n={{ locale, locales, onLocaleChange: changeLocale }}
>
  {children}
</AppLayout>

Built-in Layouts

import { PublicLayout, PrivateLayout, AuthLayout, AdminLayout, ProfileLayout } from '@djangocfg/layouts';

Layout	Description
`PublicLayout`	Public pages with nav (home, docs, contact, legal)
`PrivateLayout`	Authenticated pages with sidebar
`AuthLayout`	OTP + OAuth + 2FA authentication flow
`AdminLayout`	Admin panel
`ProfileLayout`	User profile with 2FA management

AuthLayout

<AuthLayout
  sourceUrl="https://example.com"
  redirectUrl="/dashboard"
  logoUrl="/logo.svg"
  enableGithubAuth={true}
  termsUrl="/terms"
  privacyUrl="/privacy"
/>

ProfileLayout

<ProfileLayout
  enable2FA={true}
  showMemberSince={true}
/>

Monitor & Debug

Both auto-enabled via project prop — no extra config needed.

// window.monitor available in DevTools:
window.monitor.error('Something broke', { context: 'checkout' })
window.monitor.warn('Slow response', { ms: 2500 })
window.monitor.flush()   // send buffer immediately
window.monitor.status()  // show current state

Override monitor defaults:

<BaseApp
  project="my-app"
  monitor={{ baseUrl: 'https://api.example.com', captureConsole: false }}
>

Debug panel

Cmd+D or ?debug=1 in URL to open.

// enabled by default (omit or pass empty object)
<BaseApp project="my-app">

// disable
<BaseApp debug={{ enabled: false }}>

// custom tabs (e.g. Zustand store viewer)
import type { CustomDebugTab } from '@djangocfg/debuger';

const myTabs: CustomDebugTab[] = [
  { id: 'store', label: 'Stores', icon: Database, panel: StoreTab },
];

<AppLayout debug={{ panel: { tabs: myTabs } }}>

Error Tracking

import { useErrorEmitter, emitRuntimeError } from '@djangocfg/layouts';

// In components
const { emitError } = useErrorEmitter('MyComponent');
emitError('Something failed', error);

// Outside React
emitRuntimeError('MyUtil', 'Operation failed', error);

Error Pages

import { ErrorLayout } from '@djangocfg/layouts/components/errors';

// app/not-found.tsx
export default function NotFound() {
  return <ErrorLayout code={404} supportEmail="support@example.com" />;
}

PWA

<BaseApp
  pwaInstall={{
    enabled: true,
    showInstallHint: true,
    logo: '/logo192.png',
    delayMs: 3000,
    resetAfterDays: 7,
    resumeLastPage: true,
  }}
>

Redirect

import { RedirectPage } from '@djangocfg/layouts/components/RedirectPage';

export default function Page() {
  return <RedirectPage authenticatedPath="/dashboard" unauthenticatedPath="/auth" />;
}

Legal Pages

import { PrivacyPage, TermsPage, CookiesPage, SecurityPage } from '@djangocfg/layouts/pages/legal';

export default PrivacyPage;

Exports

Path	Content
`@djangocfg/layouts`	All exports
`@djangocfg/layouts/layouts`	Layout components
`@djangocfg/layouts/snippets`	Reusable components
`@djangocfg/layouts/components`	Utility components
`@djangocfg/layouts/pages/legal`	Legal pages
`@djangocfg/layouts/utils`	OG image utils
`@djangocfg/layouts/styles`	CSS
`@djangocfg/layouts/styles/dashboard`	Dashboard CSS

Extension Packages

Package	Description
`@djangocfg/ext-newsletter`	Newsletter subscription
`@djangocfg/ext-knowbase`	Knowledge base + AI chat
`@djangocfg/ext-leads`	Lead capture forms
`@djangocfg/ext-payments`	Payments & subscriptions
`@djangocfg/ext-support`	Support tickets

License

MIT — DjangoCFG · GitHub

Keywords

FAQs

What is @djangocfg/layouts?

Is @djangocfg/layouts popular?

Is @djangocfg/layouts well maintained?

Package last updated on 14 Mar 2026

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@djangocfg/layouts