PreviewFeatures
Visual representation of keyboard keys
Support for modifier keys (Cmd, Ctrl, Shift, Alt)
Key combination display (Cmd+K, Ctrl+C)
Platform-specific key rendering
Inline usage within text
Consistent styling matching keyboard aesthetics
Shadcn/ui Kbd - Figma Component
Displays a keyboard key. This Figma component is part of our comprehensive design system that brings the popular shadcn/ui library into your design workflow.
Every Kbd variant includes all the necessary states, properties, and styling options you need to create consistent, production-ready designs. The component seamlessly integrates with your existing Figma files and maintains full compatibility with the shadcn/ui React implementation.
Your questions, answered
Browse all 58 components
Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Form
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toast
Toggle Group
Toggle
Tooltip
Keyboard shortcuts in Figma
The shadcn/ui figma Kbd displays keyboard keys and shortcuts. Design documentation, tooltips, and menus in Figma with visual key representations. This shadcn figma component makes shortcuts clear and professional.
Platform-specific keys
Design keyboard shortcuts in Figma with the shadcn/ui figma component—Cmd for Mac, Ctrl for Windows. Prototype interfaces where shortcuts adapt to user platforms, matching shadcn/ui behavior.
Key combinations
This shadcn figma Kbd supports multiple keys like Cmd+K or Ctrl+S. Design shortcuts in Figma that show simultaneous key presses clearly, helping users learn efficient workflows.
Inline keyboard documentation
The shadcn/ui figma Kbd works inline within text. Design help text and instructions in Figma where keyboard shortcuts integrate naturally with content, matching shadcn/ui styling.