Kbd

Display keyboard shortcuts and key combinations with proper styling

Primitive

Kbd renders a keyboard key or shortcut with key-cap styling. Use it in docs, tooltips, command menus, and shortcut lists to show combinations like ⌘ K or Ctrl + S. Pass keys to render a combination, and it converts named keys to platform symbols automatically.

Preview

Installation

npxnpx shadcn@latest add @cubby-ui/kbd

Usage


import { Kbd } from "@/components/ui/cubby-ui/kbd"


<Kbd />

Examples

Size Variants

Use size to set the key's height and text size.

⌘⌘⌘

import { Kbd } from "@/components/ui/cubby-ui/kbd"
 
export default function KbdSizeVariants() {
  return (
    <div className="flex items-center gap-2">
      <Kbd size="sm">⌘</Kbd>

Size	Description
`sm`	Compact key for dense UI.
`md`	The default key size.
`lg`	Larger key for emphasis.

Color Variants

Use variant to set the key's color scheme.

⌘⌘⌘⌘⌘⌘

import { Kbd } from "@/components/ui/cubby-ui/kbd"
 
export default function KbdColorVariants() {
  return (
    <div className="flex gap-2">
      <Kbd variant="default">⌘</Kbd>

Variant	Description
`default`	Card-colored key with a subtle border.
`primary`	Solid primary-colored key.
`secondary`	Solid secondary-colored key.
`outline`	Borderless, transparent key.
`ghost`	Muted key with no border or shadow.
`danger`	Destructive-colored key.

Manual Key Combinations

Compose multiple Kbd elements to build a combination by hand.

⌘+K

Ctrl+Shift+P

Alt+Tab

import { Kbd } from "@/components/ui/cubby-ui/kbd"
 
export default function KbdManualKeyCombinations() {
  return (
    <div className="space-y-3">
      <div className="flex items-center gap-1">

Key Combinations with Props

Use keys to render a combination from an array, joined by separator.

⌘+k⌃+⇧+p⌥+⇥⌘ + k

import { Kbd } from "@/components/ui/cubby-ui/kbd"
 
export default function KbdKeyCombinationsWithProps() {
  return (
    <div className="flex gap-4 flex-wrap">
      <Kbd keys={["cmd", "k"]} />

Special Keys with Auto Conversion

Named keys like cmd and shift convert to symbols automatically.

⎵↵⌫⌫↑↓←→HomeEndPgUpPgDn

import { Kbd } from "@/components/ui/cubby-ui/kbd"
 
export default function KbdSpecialKeysWithAutoConversion() {
  return (
    <div className="grid grid-cols-4 gap-2">
      <Kbd keys={["space"]} />

Platform Detection

Use platform to force mac or windows symbols, or leave it auto to detect the user's OS.

Auto:⌘+k

Mac:⌘+k

Windows:Ctrl+k

import { Kbd } from "@/components/ui/cubby-ui/kbd"
 
export default function KbdPlatformDetection() {
  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">

In Context

Place Kbd inline within prose to reference a shortcut.

Press ⌘ + K to open the command palette

Use ↑ ↓ to navigate and ↵ to select

Press Esc to close any dialog

import { Kbd } from "@/components/ui/cubby-ui/kbd"
 
export default function KbdInContext() {
  return (
    <div className="space-y-2">
      <p className="text-sm">

Keyboard Shortcuts List

Pair labels with Kbd to document a set of shortcuts.

Open command palette⌘+k

Save document⌘+s

Copy selection⌘+c

Paste clipboard⌘+v

import { Kbd } from "@/components/ui/cubby-ui/kbd"
 
export default function KbdKeyboardShortcutsList() {
  return (
    <div className="space-y-2 max-w-xs">
      <div className="flex items-center justify-between">

Live Keyboard Input Detection

Reflect the keys the user is pressing in real time.

Try typing on your keyboard to see the pressed state:

QWERTYUIOP

ASDFGHJKL

ZXCVBNM

SpaceShiftCtrl⌘

"use client"
 
import { Kbd } from "@/components/ui/cubby-ui/kbd"
import { useState, useEffect } from "react"
 
export default function KbdLiveKeyboardInputDetection() {

States

Use pressed and disabled to show active or unavailable keys.

Normal:⌘

Pressed:⌘

Disabled:⌘

import { Kbd } from "@/components/ui/cubby-ui/kbd"
 
export default function KbdStates() {
  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">

API Reference

Kbd is a custom styled kbd element. All props are custom or standard kbd attributes passed through.

Props

Kbd

Keyboard key or shortcut with key-cap styling.