Shortcut list with styled key caps.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/shortcuts
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { KeyboardShortcuts } from "@/components/nextui/shortcuts";23export function EditorShortcuts() {4return (5<KeyboardShortcuts6shortcuts={[7{ label: "Command palette", keys: ["⌘", "⇧", "P"] },8{ label: "Go to line", keys: ["Ctrl", "G"] },9{ label: "Close tab", keys: ["⌘", "W"] },10]}11/>12);13}
| Prop | Type | Default | Description |
|---|---|---|---|
| shortcuts | KeyboardShortcutItem[] | Search, New file, Save, Toggle sidebar, Undo | Rows: a label and the keys to press |
| className | string | – | Extra classes on the list |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.