Components
- Accordion
- Alert Dialog
- Alert
- Autocomplete
- Avatar
- Badge
- Button Group
- Button
- Card
- Carousel
- Chart
- Checkbox
- Clipboard
- Collapsible
- Combobox
- Command
- Context Menu
- Date Picker
- Dialog
- Editable
- Field
- File Upload
- Floating Panel
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- QR Code
- Radio Group
- Rating Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Splitter
- Steps
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle Group
- Toggle
- Tooltip
- Tour
- Tree View
Single keys:
K⌘⌃⇧
Key combinations:
⌘K
⌘ShiftP
CtrlAltDelete
Installation
pnpm dlx shadcn@latest add @shark-ui/kbd
Usage
import { Kbd, KbdGroup } from "@/components/ui";
<KbdGroup> <Kbd>⌘</Kbd> <Kbd>K</Kbd> </KbdGroup>
Variant
Use the variant prop to change the visual style of the kbd.
Outline
K⌘⌃
Examples
Group
Use <KbdGroup /> to group keys into a single shortcut.
Use
Ctrl+K
to open the command paletteInput Group
Use <Kbd /> inside InputGroup addons to show shortcut hints next to inputs.
⌘K
Button
Add shortcut hints to buttons with <Kbd /> or <KbdGroup />.
Tooltip
Show keyboard shortcuts in Tooltip content.
API Reference
Kbd
Keyboard shortcut key. Renders a kbd element.
| Prop | Type | Default |
|---|---|---|
variant | default, outline | default |
className | string | - |
asChild | boolean | false |
KbdGroup
Container for grouping multiple keys into one shortcut. Renders a div.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |