Dev Design LibraryReact Kbd Components
Dev Design Library indexes 52 React kbd components from 39 open-source UI libraries, with the most coming from ReUI, Origin UI, UI Lab, Lobe UI and ReScript shadcn. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. Kbd components belong to the Data display group.
Kbdshadcn/ui · ReactUsed to display textual user input from keyboard.
KbdChakra UI · ReactUsed to show key combinations for an action
KbdHeroUI · ReactDisplay keyboard shortcuts and key combinations
Kbdcoss ui · ReactA component for displaying keyboard keys and shortcuts.
Comp 25Origin UI · React
KbdRadix Themes · React
Basic keyboard keys.ReUI · ReactBasic keyboard keys.
KbdPark UI · ReactA typography component for displaying keyboard input and shortcuts.
HotkeyLobe UI · ReactHotkey component displays keyboard shortcuts or key combinations in a visually appealing way, supporting both standard…
Command ButtonKokonut UI · ReactA button with its shortcut drawn as keycaps that sink as you press the real keys.
keyboardIntent UI · Reactkeyboard
Kbd KeySpectrum UI · ReactA 3D keycap that physically depresses when the real key is pressed, with combo shortcuts that pulse and fire when…
Keyboard ShortcutsSpell UI · ReactDisplay keyboard shortcuts with proper key symbols.
KbdVengeance UI · React
ShortcutUser Interface Wiki · React
KBD 02 - KBD GroupShadcn Space · ReactKbdGroup showcasing grouped multi-key shortcut combinations with Mac/Windows platform switch
Keyboard Shortcuts CardOpenSourceUI · React
KbdBoardUI · React
KbdComponentry · React
KbdShadcn Dashboard · React
Animated KeyboardBadtz UI · ReactDisplays an animated keyboard with keycaps that can be customized with different colors and variants.
KbdObsidianUI · React
KbdShark UI · ReactStyled representation of a single key.
CommandButtonEvil Buttons · ReactA button with a global keyboard shortcut, shown as keycaps that sink as you hold each key.
Shortcut recorderArc Library · ReactRecord key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.
Keycap HintUI Lab · ReactKeycaps that sink when you press the real keys.
KbdHextaUI · ReactKey caps for shortcuts that show the right symbols on every platform, read them out properly and press down with the…
KbdCojeev UI · ReactFormats a key or key combination as a recognizable keyboard instruction.
KbdROI UI · ReactA component for displaying keyboard keys and shortcuts.
KbdHalaska UI · React
KeycapMetal UI · React + SwiftUIA key's glyph on a small raised cap, in the readout role: 20 tall (16 in a footer), on a light surface, a graphite…
KbdSpaceUI · ReactDisplays keyboard shortcut keys in styled badges, showing users which keys to press to perform actions faster.
Aria KbdReScript shadcn · ReScript
Isometric Mechanical KeycapCue Foundations · React
KeyboardOUI · ReactReact aria components Keyboard with shadcn characteristics.
KbdD2Studio UI · ReactUsed to display textual user input from a keyboard.
KbdFibo · ReactShows a key or a keyboard shortcut in text.
KbdReactFrame · ReactA keyboard key cap for showing shortcuts, with raised, flat and outline styles, 3 sizes, automatic Mac or Windows…
Kbdark-cn · ReactA shadcn-style keyboard shortcut component built with Ark UI primitives.
Comp 360Origin UI · React
Keyboard keys grouped together.ReUI · ReactKeyboard keys grouped together.
Hotkey InputLobe UI · ReactHotkeyInput is a specialized input component for capturing keyboard shortcuts. It allows users to record key…
KBD 05 - KBD GeneratorShadcn Space · ReactInteractive keyboard shortcut generator — pick modifiers, enter a key, preview and copy JSX code
Shortcut RecorderUI Lab · ReactPress keys to set a shortcut: keycaps appear as you hold them, and it tells you when a combo is taken.
Base KbdReScript shadcn · ReScript
Comp 373Origin UI · React
Keyboard keys combined with icons.ReUI · ReactKeyboard keys combined with icons.
Shortcut SheetUI Lab · ReactPress ? anywhere to see every shortcut, then press one to watch it light up.
Comp 93Origin UI · React
Keyboard key within an input.ReUI · ReactKeyboard key within an input.
Keyboard shortcut in a tooltip.ReUI · ReactKeyboard shortcut in a tooltip.
Keyboard shortcuts reference listReUI · ReactKeyboard shortcuts reference list
Libraries with React kbd components
Related categories
- Kbd Components
- Tailwind CSS Kbd Components
- Animated Kbd Components
- React Data Display Components
- React Card Components
- React Chart Components
- React Table Components
- React Avatar Components
- React List Components
- React Stat Components
- React Calendar Components
- React Accordion Components
- React Carousel Components
- React Collapsible Components
- React Data Table Components
- React Avatar Group Components
- React Tree View Components
- React Card Stack Components
- React Line Chart Components