Shadcn.io is not affiliated with official shadcn/ui
Kbd Button
Button with an inline keyboard shortcut chip rendered as a styled `<kbd>` element for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Kbd Button preview
Power-user buttons should advertise their keyboard shortcut. This one places the label on the left and a styled <kbd> chip on the right — Open palette ⌘K, Save ⌘S, Go to inbox G then H. The chip uses monospaced font, a subtle theme-tracked border, and a smaller muted text so it reads as metadata, not noise. Optionally hide the chip until hover for nav menus where shortcuts are nice-to-know but not always essential. Built on top of the shadcn Button so every variant and size you already use just works.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the kbd-button button into my projectRelated Components
Copy Button
Clipboard with feedback
Icon Button
Icon with active state
Theme Toggle Button
Animated sun/moon swap
Arrow Button
Hover slides in arrow
Success Button
Success checkmark state
Input Button
Expanding input field
FAQ
Was this page helpful?
Sign in to leave feedback.
Input Button
Expandable input button that transforms from button to input field with smooth animations for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Liquid Button
Liquid fill button with fluid animation that floods from bottom on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.