@djangocfg/ui

@djangocfg/ui

React UI library with 56+ 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

Components

Forms (19)

Label Button ButtonLink DownloadButton Input Checkbox RadioGroup Select Textarea Switch Slider Combobox MultiSelect MultiSelectPro MultiSelectProAsync InputOTP PhoneInput Form Field JsonSchemaForm

Layout (8)

Card Separator Skeleton AspectRatio Sticky ScrollArea Resizable Section

Navigation (7)

NavigationMenu Breadcrumb Tabs Pagination BreadcrumbNavigation SSRPagination StaticPagination

Overlay (11)

Dialog AlertDialog Sheet Drawer Popover HoverCard Tooltip Command ContextMenu DropdownMenu Menubar

Feedback (6)

Toast Alert Progress Badge Avatar Toaster

Data (8)

Table Accordion Collapsible Toggle ToggleGroup Calendar Carousel Chart

Specialized (10)

Sidebar ImageWithFallback ButtonGroup Empty Spinner Kbd TokenIcon Sonner InputGroup Item

Tools (4)

JsonTree PrettyCode Mermaid LottiePlayer

Blocks (7)

Hero SuperHero FeatureSection CTASection NewsletterSection StatsSection TestimonialSection

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

Hooks (6)

Hook	Description
useMediaQuery	Responsive breakpoints
useTheme	Light/dark theme
useCopy	Copy to clipboard
useCountdown	Countdown timer
useDebounce	Debounce values
useIsMobile	Mobile detection
useLocalStorage	Persistent state

Usage

import { Button, Card, Input, useToast } from '@djangocfg/ui';

function Example() {
  const { toast } = useToast();

  return (
    <Card>
      <Input placeholder="Email" />
      <Button onClick={() => toast({ title: 'Saved!' })}>
        Submit
      </Button>
    </Card>
  );
}

Styling

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

Exports

Path	Content
@djangocfg/ui	All components & hooks
@djangocfg/ui/blocks	Landing page blocks
@djangocfg/ui/tools	JsonTree, Mermaid, etc.
@djangocfg/ui/styles	CSS

Tailwind v4

• 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

• React >= 19
• Tailwind CSS >= 4

Full documentation & examples