@djangocfg/ui-nextjs

Next.js UI library extending @djangocfg/ui-core with 69+ components built on Radix UI + Tailwind CSS v4.

Part of DjangoCFG — modern Django framework for production-ready SaaS applications.

Live Demo & Props

Install

pnpm add @djangocfg/ui-nextjs

Architecture

@djangocfg/ui-nextjs
├── Re-exports everything from @djangocfg/ui-core (60 components, 13 hooks)
├── + Next.js specific components (11)
├── + Browser storage hooks (2)
├── + Blocks, Theme, Animations

| Package | Use Case | |---------|----------| | @djangocfg/ui-core | Electron, Vite, CRA, any React app | | @djangocfg/ui-nextjs | Next.js apps (includes ui-core + extras) |

Components

From ui-core (60)

All components from @djangocfg/ui-core are re-exported.

Next.js Specific (11)

| Component | Why Next.js | |-----------|-------------| | NextLink | Styled next/link wrapper | | NextButtonLink | Button-styled next/link with variants | | Sidebar | Uses next/link for navigation | | Breadcrumb | Uses next/link | | BreadcrumbNavigation | Uses next/link | | NavigationMenu | Uses next/link | | Menubar | Uses next/link | | DropdownMenu | Uses next/link | | Pagination | Uses next/link | | SSRPagination | Uses next/link + server components | | DownloadButton | Uses localStorage for auth |

MultiSelect Pro

MultiSelectPro MultiSelectProAsync — Advanced multi-select with async loading

Blocks (7)

Hero SuperHero FeatureSection CTASection NewsletterSection StatsSection TestimonialSection

import { Hero } from '@djangocfg/ui-nextjs/blocks';

Hooks

From ui-core (13)

| Hook | Description | |------|-------------| | useMediaQuery | Responsive breakpoints | | useIsMobile | Mobile detection | | useCopy | Copy to clipboard | | useCountdown | Countdown timer | | useDebounce | Debounce values | | useDebouncedCallback | Debounced callbacks | | useImageLoader | Image loading state | | useToast / toast | Toast notifications (Sonner) | | useEventListener | Event bus | | useDebugTools | Debug utilities | | useHotkey | Keyboard shortcuts | | useBrowserDetect | Browser detection | | useDeviceDetect | Device detection |

Next.js Specific (2)

| Hook | Description | |------|-------------| | useResolvedTheme | Light/dark theme resolution (next-themes) | | useLocalStorage | Persistent state in localStorage |

Note: useSessionStorage is also available in ui-core.

Dialog Service

The dialog service from ui-core is available for replacing native dialogs:

import { DialogProvider, useDialog, dialog } from '@djangocfg/ui-core/lib/dialog-service';

See ui-core README for full documentation.

Usage

import {
  Button, Card, Input,  // from ui-core
  NextButtonLink, Sidebar  // Next.js specific
} from '@djangocfg/ui-nextjs';
import { useLocalStorage } from '@djangocfg/ui-nextjs/hooks';

function Example() {
  const [saved, setSaved] = useLocalStorage('form', null);

  return (
    <Sidebar>
      <Card>
        <Input placeholder="Email" />
        <Button>Submit</Button>
        <NextButtonLink href="/dashboard" variant="outline">
          Go to Dashboard
        </NextButtonLink>
      </Card>
    </Sidebar>
  );
}

NextButtonLink Examples

import { NextButtonLink } from '@djangocfg/ui-nextjs';
import { ArrowLeft, Settings } from 'lucide-react';

// Basic
<NextButtonLink href="/dashboard">Dashboard</NextButtonLink>

// With variants
<NextButtonLink href="/settings" variant="outline" size="sm">
  <Settings className="h-4 w-4 mr-2" />
  Settings
</NextButtonLink>

// Icon button (back navigation)
<NextButtonLink href="/list" variant="ghost" size="icon">
  <ArrowLeft className="h-4 w-4" />
</NextButtonLink>

// With Next.js Link props
<NextButtonLink href="/page" prefetch={false} replace scroll={false}>
  Navigate
</NextButtonLink>

Styling

// Import global styles
import '@djangocfg/ui-nextjs/styles/globals';

Logger

Universal logger with consola + zustand for Console panel integration.

import { createLogger, createMediaLogger } from '@djangocfg/ui-nextjs/lib';

// Basic logger
const log = createLogger('MyComponent');
log.info('User logged in', { userId: 123 });
log.error('Failed to load', { error });

// Media logger (with seek/buffer helpers)
const mediaLog = createMediaLogger('AudioPlayer');
mediaLog.load(src, 'stream');
mediaLog.seek(from, to, duration);
mediaLog.buffer(buffered, duration);

Exports

| Path | Content | |------|---------| | @djangocfg/ui-nextjs | All components & hooks | | @djangocfg/ui-nextjs/components | Components only | | @djangocfg/ui-nextjs/hooks | Hooks only | | @djangocfg/ui-nextjs/blocks | Landing page blocks | | @djangocfg/ui-nextjs/lib | Logger, utilities | | @djangocfg/ui-nextjs/theme | ThemeProvider, ThemeToggle | | @djangocfg/ui-nextjs/styles | CSS |

Theme

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

function App({ children }) {
  return (
    <ThemeProvider>
      {children}
      <ThemeToggle />
    </ThemeProvider>
  );
}

Tailwind v4 Notes

• Arbitrary values (h-[80px]) may not work — use inline styles
• Opacity modifiers (bg-background/80) broken with HSL — use inline styles
• Define spacing/z-index in @theme block

Requirements

• Next.js >= 15
• React >= 19
• Tailwind CSS >= 4

Full documentation & examples