Overview
Packages
Theme Configurator
Interactive
3
Command
Toggle
ToggleGroup
Forms
23
Button
ButtonGroup
ButtonLink
Checkbox
Combobox
CopyButton
CopyField
DownloadButton
Field
Form
Input
InputGroup
InputOTP
Label
MultiSelect
MultiSelectPro
MultiSelectProAsync
PhoneInput
RadioGroup
Select
Slider
Switch
Textarea
Layout
14
AspectRatio
Card
ImageWithFallback
Item
Kbd
Portal
Preloader
Resizable
ScrollArea
Section
Separator
Sidebar
Skeleton
Sticky
Navigation
6
Breadcrumb
BreadcrumbNavigation
Menubar
NavigationMenu
Pagination
Tabs
Overlay
9
AlertDialog
ContextMenu
Dialog
Drawer
DropdownMenu
HoverCard
Popover
Sheet
Tooltip
Feedback
4
Alert
Badge
Progress
Toast
Data Display
9
Accordion
Calendar
Carousel
Collapsible
DatePicker
DateRangePicker
SSRPagination
StaticPagination
Table
Specialized
4
Empty
OgImage
Spinner
Toaster
Developer Tools
11
Interactive JsonSchemaForm
JsonTree
LottiePlayer
MarkdownMessage with Mermaid
MarkdownMessage
Mermaid
OgImageTemplate
OpenapiViewer
PrettyCode
UseQueryParams
VideoPlayer
Blocks
7
CTASection
FeatureSection
Hero
NewsletterSection
StatsSection
SuperHero
TestimonialSection
Hooks
14
useCopy
useCountdown
useDebounce
useDebouncedCallback
useDebugTools
useDeviceDetect
useEventListener
useHotkey
useImageLoader
useIsMobile
useLocalStorage
useMediaQuery
useSessionStorage
useThemeContext
Charts
7
Area Chart
Bar Chart
ChartContainer
Donut Chart
Line Chart
Pie Chart
Radial Bar Chart
Animations
8
Aurora Borealis
Color Schemes
Floating Orbs
Geometric Flow
AnimatedBackground
Liquid Gradient
Mesh Gradient
Spotlight
Copy for AI
122 components
DateRangePicker
@djangocfg/ui-nextjs
Toggle theme
Preview
Code
Usage guide?
Input field with popover calendar for selecting a date range
Dec 10, 2025 - Dec 17, 2025
From:
12/10/2025
To:
12/17/2025
7 days
Import
Loading code...