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
useHotkey
@djangocfg/ui-nextjs
Toggle theme
Preview
Code
Usage guide?
Keyboard shortcuts hook - wrapper for react-hotkeys-hook
useHotkey
Wrapper for react-hotkeys-hook. Focus this panel and try the shortcuts.
0
Counter
○
Not saved
Available Shortcuts:
Increment counter
↑
Decrement counter
↓
Save (mod = ⌘/Ctrl)
⌘
+
⇧
+
S
Reset counter
Alt
+
R
Reset all
Esc
Usage Examples:
Loading code...
Import
Loading code...