Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Editing Keys
A React keyboard display showing Home, End, PgUp, and PgDn editing navigation keys using shadcn/ui Kbd components for text editing documentation
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Jump to start, end, or scroll pages with editing keys. This React pattern displays Home, End, PgUp, and PgDn navigation keys using shadcn/ui Kbd components with gap-1 spacing. Built for text editor documentation, content management guides, form field instructions, or any interface teaching users the navigation shortcuts for jumping through text content and scrolling pages efficiently across documents and long forms.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Special Keys
Esc, Tab, Enter keys
Modifier Keys
Shift, Ctrl, Alt keys
Function Keys Row
Complete F1-F12 display
Basic Kbd
Simple keyboard key display
Textarea
Text input with navigation
Form
Form with keyboard navigation
Questions you might have
React kbd - Modifier Keys
A React keyboard display showing Shift, Ctrl, and Alt modifier keys using shadcn/ui Kbd components for documenting keyboard shortcut combinations
React kbd - Mac Command Symbol
Mac Command key Kbd component showing ⌘ symbol in KbdGroup for macOS keyboard shortcuts built with shadcn/ui