@djangocfg/ui-tools
Heavy, lazy-loaded React components for admin, devtools, and dashboards. Pairs with @djangocfg/ui-core (primitives + theme tokens).
Every tool is React.lazy by default — import what you use, pay only its bundle cost.
Install
pnpm add @djangocfg/ui-tools @djangocfg/ui-core
/* your app's globals.css — Tailwind v4 must scan this package's sources */
@import "@djangocfg/ui-core/styles/full";
@import "@djangocfg/ui-tools/styles"; /* ← add this */
Without the styles import, Tailwind never sees this package's classes and tools render partially unstyled.
Wrap your app in <UiProviders> from @djangocfg/ui-core once at the root (gives Tooltip/Dialog/Toast context to every tool).
Catalogue
| Group | Tools |
|---|---|
chat/ | ChatLauncher, MessageList, Composer, SuggestedPrompts |
data/ | DataGrid · DataTable · JsonTree · Kanban · Listbox · Masonry · Timeline · Tree |
dev/code/ | PrettyCode · DiffViewer · MarkdownMessage |
dev/api/ | OpenapiViewer · ApiRefTable · RequestViewer |
dev/ops/ | LogViewer · EnvTable |
dev/ (top) | Mermaid · Map |
forms/ | CodeEditor (Monaco) · JsonEditor · JsonForm · MarkdownEditor · NotionEditor · FileUpload · Uploader |
input/ | Combobox · CronScheduler (+ CronPreview) · Scroller · Sortable · SpeechRecognition |
media/ | AudioPlayer · VideoPlayer · ImageViewer · LottiePlayer · Gallery |
overlay/ | ResponsiveDialog · ScrollSpy · SelectionToolbar · Tour |
visual/charts/ | Gauge · ActivityGraph · CommitGraph · Sparkline |
visual/indicators/ | StatusIndicator · Fps · Rating |
visual/design/ | ColorPicker · ColorPalette · FileIcon |
visual/ (top) | Marquee · QRCode |
Sub-grouping is internal — public imports stay flat.
Usage
import { JsonTree, LogViewer, DiffViewer, CronScheduler } from '@djangocfg/ui-tools';
<JsonTree data={response} compactHeader />
<LogViewer entries={logs} />
<DiffViewer oldCode={a} newCode={b} language="ts" view="split" />
<CronScheduler value={cron} onChange={setCron} />
Subpath imports avoid loading siblings:
import { JsonTree } from '@djangocfg/ui-tools/json-tree';
import { LogViewer } from '@djangocfg/ui-tools/log-viewer';
Theming
All tools render through @djangocfg/ui-core semantic tokens (bg-card, text-foreground, border-border, status surfaces) — they adapt automatically to light/dark and to the theme presets in ui-core.
Two intentional exceptions, both opt-in via prop:
PrettyCode— fixed dark surface regardless of UI theme. Code blocks ship their own contrast model (GitHub/VSCode/ChatGPT convention); mixing with light UI produces low-contrast pastel renders. Override viamode="light".DiffViewer— adaptive; usesthemes.githubon light,themes.vsDarkon dark viauseResolvedTheme().
Canvas/SVG components (charts, viz) sample theme colors via useThemeColor/alpha from @djangocfg/ui-core/styles/palette — never color-mix/oklch strings (Canvas2D rejects them).
Lazy loading
Every tool's default export is React.lazy-wrapped; initial bundle stays small. Heaviest:
Mermaid ~800KB · Monaco CodeEditor ~550KB · PrettyCode (shiki) ~500KB · OpenapiViewer ~400KB · JsonForm ~300KB · AudioPlayer (WaveSurfer) ~200KB · LottiePlayer ~200KB · NotionEditor (TipTap) ~200KB · VideoPlayer (media-chrome) ~150KB · JsonTree ~100KB · ImageViewer ~50KB · CronScheduler ~15KB.
Works in Next.js, Vite, Wails, CRA — no framework lock-in.
Build discipline
After any src/ change, run pnpm build before considering the change done — consumers pick up dist/ via pnpm sync:cfg; a stale dist/ ships old code silently. See CLAUDE.md for details.
pnpm build # rebuild dist/ (tsup)
pnpm check # tsc --noEmit
Requirements
- React 18 or 19
@djangocfg/ui-core(peer)- Tailwind CSS v4 (host imports
@djangocfg/ui-core/styles)
License
MIT — © djangocfg.