Command Palette

Search for a command to run...

Kbd

CuiCui

A component to display keyboard keys and shortcuts.

Press

⌘K

to open search

Or use

⌘ + K

import { Kbd, KbdGroup } from "@/registry/optics/kbd";import { Command } from "lucide-react";// Basic usage<Kbd>⌘</Kbd><Kbd>K</Kbd>// Grouped keys<KbdGroup>	<Kbd><Command /></Kbd>	<Kbd>+</Kbd>	<Kbd>K</Kbd></KbdGroup>// With hotkey detection and animation<Kbd useHotkey>⌘</Kbd><Kbd useHotkey>K</Kbd>// With custom hotkey prop<Kbd useHotkey hotkey="mod+k" onHotkeyPress={() => console.log("Pressed!")}>	⌘ K</Kbd>// Legacy variant<Kbd variant="legacy">⌘</Kbd><Kbd variant="legacy">K</Kbd>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/kbd.json

Props

<Kbd />
Name
Type
className
string
variant
"default" | "legacy" (default: "default")
useHotkey
boolean (default: false)
hotkey
string
onHotkeyPress
(event) => void
animate
boolean (default: true)

<KbdGroup />
Name
Type
className
string
ItemLabel