@djangocfg/ui-core

@djangocfg/ui-core

Pure React UI library with 65+ components built on Radix UI + Tailwind CSS v4.

No Next.js dependencies — works with Electron, Vite, CRA, and any React environment.

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

Live Demo & Props

Install

pnpm add @djangocfg/ui-core

Why ui-core?

Package	Use Case
@djangocfg/ui-core	Electron, Vite, CRA, any React app
@djangocfg/ui-tools	Heavy tools with lazy loading
@djangocfg/ui-nextjs	Next.js apps (extends ui-core)

Components (60+)

Forms (18)

Label Button ButtonLink Input Checkbox RadioGroup Select Textarea Switch Slider Combobox MultiSelect CountrySelect LanguageSelect InputOTP PhoneInput Form Field

Layout (8)

Card Separator Skeleton AspectRatio Sticky ScrollArea Resizable Section

Overlay (7)

Dialog AlertDialog Sheet Drawer Popover HoverCard Tooltip

Feedback (5)

Toaster Alert Progress Badge Avatar

Data (8)

Table Tabs Accordion Collapsible Toggle ToggleGroup Calendar Carousel

Interactive (3)

Command ContextMenu Chart

Specialized (13)

ButtonGroup Empty Spinner Preloader Kbd TokenIcon InputGroup Item ImageWithFallback OgImage CopyButton CopyField StaticPagination

Hooks (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 (react-hotkeys-hook)
useBrowserDetect	Browser detection (Chrome, Safari, in-app browsers, etc.)
useDeviceDetect	Device detection (mobile, tablet, desktop, OS, etc.)

Theme Palette Hooks

Hooks for accessing theme colors from CSS variables (useful for charts, diagrams, etc.):

Hook	Description
useThemePalette()	Full color palette from CSS variables
useStylePresets()	Pre-built style configs for diagrams
useBoxColors()	Colors for boxes/containers

import { useStylePresets, useBoxColors } from '@djangocfg/ui-core/styles/palette';

function MyChart() {
  const presets = useStylePresets();
  // presets.success = { fill: '#22c55e', stroke: '#16a34a', color: '#ffffff' }
  // presets.warning = { fill: '#f59e0b', stroke: '#d97706', color: '#000000' }
  // presets.danger = { fill: '#ef4444', stroke: '#dc2626', color: '#ffffff' }
  // presets.info = { fill: '#3b82f6', stroke: '#2563eb', color: '#ffffff' }
  // presets.primary = { fill: '#...', stroke: '#...', color: '#...' }

  const boxes = useBoxColors();
  // boxes.primary = 'rgba(59, 130, 246, 0.2)'
  // boxes.success = 'rgba(34, 197, 94, 0.2)'
  // etc.

  return <Chart colors={[presets.success.fill, presets.warning.fill]} />;
}

Color Utilities

import { hslToHex, hslToRgbString, hslToRgba } from '@djangocfg/ui-core/styles/palette';

hslToHex('217 91% 60%');        // '#3b82f6'
hslToRgbString('217 91% 60%'); // 'rgb(59, 130, 246)'
hslToRgba('217 91% 60%', 0.5); // 'rgba(59, 130, 246, 0.5)'

Dialog Service

Universal dialog service to replace native window.alert, window.confirm, window.prompt with beautiful shadcn dialogs.

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

// Wrap your app with DialogProvider
function App() {
  return (
    <DialogProvider>
      <YourApp />
    </DialogProvider>
  );
}

// Use via React hook
function Component() {
  const { alert, confirm, prompt } = useDialog();

  const handleDelete = async () => {
    const confirmed = await confirm({
      title: 'Delete item?',
      message: 'This action cannot be undone.',
      variant: 'destructive',
    });
    if (confirmed) {
      // Delete...
    }
  };
}

// Or use globally from anywhere (vanilla JS, libraries, etc.)
dialog.alert({ message: 'Hello!' });
const ok = await dialog.confirm({ message: 'Are you sure?' });
const name = await dialog.prompt({ message: 'Enter your name:' });

Usage

import { Button, Card, Input } from '@djangocfg/ui-core';
import { toast } from '@djangocfg/ui-core/hooks';

function Example() {
  return (
    <Card>
      <Input placeholder="Email" />
      <Button onClick={() => toast.success('Saved!')}>
        Submit
      </Button>
    </Card>
  );
}

Electron Usage

// In Electron renderer process
import { Button, Dialog, useMediaQuery } from '@djangocfg/ui-core';
import '@djangocfg/ui-core/styles/globals';

function App() {
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (
    <Dialog>
      <Button>Open Dialog</Button>
    </Dialog>
  );
}

Styling

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

Exports

Path	Content
@djangocfg/ui-core	All components & hooks
@djangocfg/ui-core/components	Components only
@djangocfg/ui-core/hooks	Hooks only
@djangocfg/ui-core/lib	Utilities (cn, etc.)
@djangocfg/ui-core/lib/dialog-service	Dialog service
@djangocfg/ui-core/utils	Runtime utilities (emitRuntimeError)
@djangocfg/ui-core/styles	CSS
@djangocfg/ui-core/styles/palette	Theme palette hooks & utilities

Runtime Error Emitter

Emit runtime errors as events (caught by ErrorTrackingProvider in layouts):

import { emitRuntimeError } from '@djangocfg/ui-core/utils';

try {
  doSomething();
} catch (error) {
  emitRuntimeError('MyComponent', 'Operation failed', error, { extra: 'context' });
}

What's NOT included (use ui-nextjs)

These features require Next.js or browser storage APIs:

• Sidebar — uses next/link
• Breadcrumb, BreadcrumbNavigation — uses next/link
• NavigationMenu, Menubar — uses next/link
• Pagination, SSRPagination — uses next/link
• DropdownMenu — uses next/link
• DownloadButton — uses localStorage
• useTheme — uses next-themes
• useQueryParams, useCfgRouter — uses next/router

Requirements

• React >= 18 or >= 19
• Tailwind CSS >= 4

Full documentation & examples