A keycap for showing keyboard input. One key per cap, grouped as a combo, chord or sequence.
FreeWeb and Mobile3 variantsMotion
Preview
npx shadcn add @fetaui/kbdPlayground
Command
Outline and Soft
CommandCommand
Inverse
CommandS
Sizes
CommandKCommandKCommandK
States
KKK
Group
CommandKCtrlShiftPGthenI
Inline
Press CommandK to open the command palette
Tooltip
Save changes CommandS
Search
Search componentsCommandK
Footer
Esc to closeCommandEnter Save
Sheet: press the keys
Keyboard shortcutsQuestion mark
Command paletteCommandK
New fileCommandN
Search in filesCommandShiftF
Go to inboxGthenI
Toggle sidebarCommandBackslash
Sheet, Mobile
Keyboard shortcutsQuestion mark
Command paletteCommandK
New fileCommandN
Search in filesCommandShiftF
Go to inboxGthenI
Toggle sidebarCommandBackslash
Variant
Size
Icons animation
Pressed
Disabled
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/kbd
Sizes
Small in text and footers, Medium by default, Large in sheets on Mobile.
CommandKCommandKCommandK
Variant
Accessibility
- Native kbd elements, so screen readers announce keyboard input.
- Symbols are spoken by name: ⌘ reads Command and ⇧ reads Shift.
- Modifiers come first, in ⌃ ⌥ ⇧ ⌘ order.
Motion
- Caps stay still unless they teach. With
listen, a held cap sinks 1 px in 60 ms and returns in 120 ms. - Chord caps press left to right, 40 ms apart.
- In a sequence, then fades while the next key waits.
- With reduced motion, a held cap shows the wash only and chords press all at once.
Responsive behavior
- 18, 22, 28 px at every width. Use Large on tablets and touch keyboards.
Performance
- Plain kbd elements with no Motion.
- listen adds window key listeners, removed on unmount. Leave it off unless you are teaching a shortcut.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Kbd and KbdGroup. Kbd props: variant, size, pressed, disabled, spoken. One key per cap.
- KbdGroup takes keys or Kbd children, plus kind (combo, chord, sequence) and listen.
- Symbols like ⌘ already have spoken names. Pass spoken for others.
- These only show keys. Bind the real shortcut in your app.
Related
TooltipComponentA short label that names a control on hover, focus or long press, in Ink, Soft or a rich tab shape.CommandComponentA keyboard first menu for every action in the product, with fuzzy search, submenus and inline confirmation.ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.SearchComponentA search field and a command palette for finding anything and running commands.MenubarComponentA persistent row of menus, like a desktop app. The open tab slides between triggers, and holding Alt shows every access key.