Kbd

ShiftEnter

CmdK

A keyboard key component for displaying keyboard shortcuts and hotkeys. Essential for notebook interfaces where keyboard shortcuts are commonly used for cell execution, navigation, and editing.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/kbd.json

Copy the component from this repository's components/ui/kbd.tsx.

Usage

import { Kbd, KbdGroup } from "@/registry/primitives/kbd"

export function Example() {
  return (
    <KbdGroup>
      <Kbd>Shift</Kbd>
      <Kbd>Enter</Kbd>
    </KbdGroup>
  )
}

Single Key

EnterEscTabSpace

<Kbd>Enter</Kbd>
<Kbd>Esc</Kbd>
<Kbd>Tab</Kbd>
<Kbd>Space</Kbd>

Key Combinations

Use KbdGroup to display key combinations:

ShiftEnter

CmdS

CtrlAltDelete

<KbdGroup>
  <Kbd>Shift</Kbd>
  <Kbd>Enter</Kbd>
</KbdGroup>

<KbdGroup>
  <Kbd>Cmd</Kbd>
  <Kbd>S</Kbd>
</KbdGroup>

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>Alt</Kbd>
  <Kbd>Delete</Kbd>
</KbdGroup>

Variants

Default

Default

<Kbd>Default</Kbd>

Dark

For use on dark backgrounds:

Dark

CmdK

<Kbd variant="dark">Dark</Kbd>

Notebook Shortcuts

Common notebook keyboard shortcuts:

ShiftEnter

Run cell and advance

CmdEnter

Run cell

EscEnter command mode

EnterEnter edit mode

Props

Kbd

Prop	Type	Default	Description
`variant`	`"default" \| "dark"`	`"default"`	Visual style variant
`className`	`string`	—	Additional CSS classes
`...props`	`HTMLAttributes<HTMLElement>`	—	All standard kbd attributes

KbdGroup

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	—	All standard div attributes

Kbd

On this page