@djangocfg/ui-nextjs

Next-specific runtime for DjangoCFG: PWA install support and browser-storage hooks.

UI primitives (Button, Card, Sidebar, Pagination, Breadcrumb, etc.) live in @djangocfg/ui-core — they're framework-agnostic and don't belong here. Import them from there directly.

Theme lives in ui-core. ThemeProvider, ThemeToggle, ForceTheme, useThemeContext are framework-agnostic — import them from @djangocfg/ui-core. (The old @djangocfg/ui-nextjs/theme re-export has been removed.)

Part of DjangoCFG.

Install

pnpm add @djangocfg/ui-nextjs

What's inside

| Subpath | Purpose | |---|---| | @djangocfg/ui-nextjs/pwa | PwaProvider, A2HSHint, useInstall, useIsPWA, install detection helpers | | @djangocfg/ui-nextjs/hooks | useLocalStorage, useSessionStorage and other Next-runtime-only hooks |

That's it. Anything else you might be looking for is in @djangocfg/ui-core.

Theme

The theme runtime lives in @djangocfg/ui-core (it is framework-agnostic) — import it from there:

import { ThemeProvider, ThemeToggle } from '@djangocfg/ui-core';

<ThemeProvider>
  {children}
  <ThemeToggle />
</ThemeProvider>

PWA

import { PwaProvider, A2HSHint, useInstall } from '@djangocfg/ui-nextjs/pwa';

<PwaProvider enabled>
  {children}
  <A2HSHint resetAfterDays={7} delayMs={3000} logo="/logo192.png" />
</PwaProvider>

function InstallButton() {
  const { canPrompt, install, isInstalled } = useInstall();
  if (isInstalled || !canPrompt) return null;
  return <button onClick={install}>Install</button>;
}

Browser storage

import { useLocalStorage } from '@djangocfg/ui-nextjs/hooks';

const [draft, setDraft] = useLocalStorage('contact-form', null);

Requirements

• Next.js ≥ 16
• React ≥ 19
• Tailwind CSS ≥ 4 (for theme tokens consumed by ui-core components)

djangocfg.com