@djangocfg/ui-core

Pure React UI library with 61 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

``bash
pnpm add @djangocfg/ui-core
`

Why ui-core?

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

Components (60)

$3


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

$3

Card Separator Skeleton AspectRatio Sticky ScrollArea Resizable Section

$3

Dialog AlertDialog Sheet Drawer Popover HoverCard Tooltip

$3

Toaster Alert Progress Badge Avatar

$3

Table Tabs Accordion Collapsible Toggle ToggleGroup Calendar Carousel

$3

Command ContextMenu Chart

$3

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.) |

Dialog Service

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

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

// Wrap your app with DialogProvider
function App() {
return (



);
}

// 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

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

function Example() {
return (


toast.success('Saved!')}>
Submit


);
}
`

Electron Usage

`tsx
// 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 (



Open Dialog



);
}
`

Styling

`tsx
// 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/styles | CSS |

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