Kbd Components

Dev Design Library indexes 58 kbd components from 43 open-source UI libraries, with the most coming from ReUI, Origin UI, sv-particles, UI Lab and Lobe UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Kbd components belong to the Data display group.

• Kbdshadcn/ui · ReactUsed to display textual user input from keyboard.
• KbddaisyUI · CSS (Tailwind)
• 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
• Keycap PressKinetics · HTML/CSSMechanical keycap depresses on its shadow
• KbdBoardUI · React
• KbdComponentry · React
• KbdShadcn Dashboard · React
• Spell Keyboard ShortcutAnimations (Svelte) · Svelte
• 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
• Basic Kbdsv-particles · Svelte
• 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.
• Keyboard Shortcutsv-particles · Svelte
• 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.
• With Keyboard Shortcut Searchsv-particles · Svelte
• 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 kbd components

• ReUI
• Origin UI
• sv-particles
• UI Lab
• Lobe UI

Related categories

• React Kbd Components
• Tailwind CSS Kbd Components
• Animated Kbd Components
• Data Display Components
• Card Components
• Chart Components
• Table Components
• Avatar Components
• List Components
• Stat Components
• Calendar Components
• Accordion Components
• Data Table Components
• Carousel Components
• Collapsible Components
• Avatar Group Components
• Stat Card Components
• Bar Chart Components
• Tree View Components