Skip to main content
HotkeyPad provides extensive styling options through CSS variables and data attribute selectors, allowing you to customize the appearance to match your design system.

​
CSS variables

HotkeyPad exposes 8 CSS variables that control colors and typography. These variables automatically adapt for light and dark modes.

​
Available variables

#hotkeypad {
  --hotkeypad-bg-kbd: #f9fafb;
  --hotkeypad-bg-backdrop: #fff;
  --hotkeypad-bg-container: #fff;
  --hotkeypad-bg-item-hover: #f3f4f6;
  --hotkeypad-border-container: #d1d5db;
  --hotkeypad-border-container-hover: #9ca3af;
  --hotkeypad-fg-muted: #4b5563;
  --hotkeypad-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
VariableDescriptionLight defaultDark default
--hotkeypad-bg-kbdBackground color for keyboard shortcuts#f9fafb#1f2937
--hotkeypad-bg-backdropBackground color for the backdrop overlay#fff#000
--hotkeypad-bg-containerBackground color for the main container#fff#1f2937
--hotkeypad-bg-item-hoverBackground color for hovered items#f3f4f6#161e2e
--hotkeypad-border-containerBorder color for the container#d1d5db#374151
--hotkeypad-border-container-hoverBorder color on hover#9ca3af#9ca3af
--hotkeypad-fg-mutedText color for muted elements#4b5563#d1d5db
--hotkeypad-font-monoFont family for keyboard shortcutsSystem monospaceSystem monospace

​
Custom color example

#hotkeypad {
  --hotkeypad-bg-container: #1a1a2e;
  --hotkeypad-bg-item-hover: #16213e;
  --hotkeypad-border-container: #0f3460;
  --hotkeypad-fg-muted: #e94560;
}
CSS variables are scoped to #hotkeypad, so they won’t affect other parts of your application.

​
Data attribute selectors

HotkeyPad uses data attributes to identify different parts of the interface. You can target these attributes to apply custom styles.

​
Available selectors

#hotkeypad [data-backdrop] { }      /* Backdrop overlay */
#hotkeypad [data-container] { }     /* Main container */
#hotkeypad [data-sections] { }      /* Sections wrapper */
#hotkeypad [data-section] { }       /* Individual section */
#hotkeypad [data-empty] { }         /* Empty state message */
#hotkeypad [data-hotkey] { }        /* Command item */
#hotkeypad [data-hotkey][data-active] { } /* Active command item */

​
Styling examples

#hotkeypad [data-container] {
  border-radius: 1rem;
}

#hotkeypad [data-hotkey] div span {
  border-radius: 0.5rem;
}

​
Advanced styling

You can combine CSS variables with data attributes for more sophisticated customizations.
Advanced example
/* Custom glass morphism effect */
#hotkeypad [data-container] {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* Gradient text for section headers */
#hotkeypad [data-section] h4 {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animated active state */
#hotkeypad [data-hotkey][data-active] {
  transform: translateX(4px);
  transition: transform 0.2s ease;
}
Use your browser’s DevTools to inspect HotkeyPad elements and experiment with styles in real-time.

Build docs developers (and LLMs) love

Get started for freeTalk to us