@djangocfg/ui-nextjs

Next.js UI library extending @djangocfg/ui-core with 70+ 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 (61 components, 10 hooks)
├── + Next.js specific components (10)
├── + Browser storage hooks (5)
├── + Blocks, Tools, 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 (61)

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

Next.js Specific (10)

| Component | Why Next.js | |-----------|-------------| | 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 | | SonnerToaster | Sonner toast integration |

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';

Tools (4)

JsonTree PrettyCode Mermaid LottiePlayer

import { PrettyCode } from '@djangocfg/ui-nextjs/tools';

Hooks

From ui-core (10)

useMediaQuery useIsMobile useCopy useCountdown useDebounce useDebouncedCallback useImageLoader useToast useEventListener useDebugTools

Next.js/Browser Specific (5)

| Hook | Description | |------|-------------| | useLocalStorage | Persistent state in localStorage | | useSessionStorage | Session-scoped state | | useTheme | Light/dark theme (next-themes) | | useQueryParams | URL query params (next/router) | | useCfgRouter | Enhanced Next.js router |

Usage

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

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

  return (
    <Sidebar>
      <Card>
        <Input placeholder="Email" />
        <Button>Submit</Button>
      </Card>
    </Sidebar>
  );
}

Styling

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

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/tools | JsonTree, Mermaid, etc. | | @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