kbd
Pick a variant of the kbd component.
Shadcn Kbd: Create Stylish and Functional Kbds for Your UI
Shadcn Kbd component is used to display keyboard shortcuts and commands in a clear, stylized way.
Built with local code, it handles layout, padding, and state out of the box.
Used in headers, dashboards, and lists for key command discovery.
What is a Shadcn Kbd?
A kbd is a versatile element for shortcut display and command-based flows (e.g., keys, commands, and search). Shadcn Kbd composes with native HTML and Tailwind for layout, padding, and state.
Kbds can have keys, commands, and interactive elements. Each kbd is a self-contained unit that helps organize your commands.
Why Use Shadcn Kbd?
Kbds provide a structured way to present shortcuts without overwhelming users. They help with discovery, search, and scanning through choices.
Accessibility and consistency are built-in. By using kbds, your application stays visually uniform while being accessible by default.
Key Features of Shadcn Kbd
- Search Support. Integrated search field for filtering long command-based lists.
- Size Variants. Full control over padding, shadows, and state using Tailwind.
- Responsive Design. Kbds work perfectly across all screen sizes and device types.
- Interactive States. Combine with hover effects or interactive elements like buttons.
- Flexible Layout. Kbds can be used in toolbars, headers, or as standalone blocks.
Works Well With Other Components
Use Shadcn Kbd inside Shadcn Tooltip or Shadcn Button for shortcut discovery. Combine with Shadcn Command for powerful command-palette interfaces.
Place Shadcn Input or Shadcn Search around a kbd for discoverable search and action menus.