Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Keyboard Table for React Radix UI

Key / Description rows with keycap shortcuts.

Framework
UI library
KeyDescription
Tab
Next focusable element.
ShiftTab
Previous focusable element.
ArrowDown
Next trigger.
ArrowUp
Previous trigger.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/keyboard-table.json

Usage

import {
  KeyboardTable,
  KeyboardTableItem,
} from "@/components/ui/keyboard-table";
<KeyboardTable className="w-full max-w-lg">
  <KeyboardTableItem keys="Tab">Next focusable element.</KeyboardTableItem>
  <KeyboardTableItem keys="Shift + Tab">
    Previous focusable element.
  </KeyboardTableItem>
  <KeyboardTableItem keys="ArrowDown">Next trigger.</KeyboardTableItem>
  <KeyboardTableItem keys="ArrowUp">Previous trigger.</KeyboardTableItem>
</KeyboardTable>

Demos

Combo

Size Compact

Variant Default

API Reference

KeyboardTable

div

PropType

KeyboardTableItem

PropType
AttributeType