Kbd

Preview

Kbd

TypeScript

Ctrl+Shift+p

Installation

bash

1npx shadcn@latest add https://fysk.dev/r/kbd.json

Usage

tsx

1import { Kbd, KbdGroup } from "@/components/ui"
2
3<Kbd keys={["mod", "shift", "p"]} />
4
5<KbdGroup>
6  <Kbd keys={["mod"]} />
7  <Kbd keys={["shift"]} />
8  <Kbd keys={["p"]} />
9</KbdGroup>

Examples

Variants

Multiple visual styles including high-fidelity Mac-style and Modern gradients.

Component

TypeScript

ABCD⌘K

Grouping Shortcuts

Use KbdGroup to display key combinations with automatic separators.

Component

TypeScript

Ctrl+Shift+p

Features

Platform Detection: Automatically converts keys like mod to ⌘ on Mac and Ctrl on Windows/Linux.
Copy to Clipboard: Built-in support for copying the shortcut text with a visual feedback ring.
Rich Aesthetics: Polished variants including glass (backdrop blur) and mac (detailed gradients).
Group Component: Handles spacing and consistent scaling for key combinations.

Props

Kbd

Prop	Type	Default	Description
`keys`	`string[]`	-	Array of keys to display (e.g. `['mod', 'P']`).
`variant`	`string`	`"default"`	Visual style: `default`, `outline`, `solid`, `ghost`, `glass`, `mac`, `modern`.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	The size of the key.
`separator`	`string`	`"+"`	Separator between keys in the display.
`platform`	`"mac" \| "windows" \| "linux" \| "auto"`	`"auto"`	Overrides the detected platform for symbol formatting.
`icon`	`React.ReactNode`	-	Icon to display alongside the key.
`iconPosition`	`"start" \| "end"`	`"start"`	Position of the icon.
`active`	`boolean`	`false`	Whether the key is currently active/pressed.
`disabled`	`boolean`	`false`	Whether the key is disabled.
`copyable`	`boolean`	`false`	Whether the kbd can be clicked to copy its value.
`onCopyText`	`(text: string) => void`	-	Callback when the kbd text is copied to clipboard.

KbdGroup

Prop	Type	Default	Description
`separator`	`React.ReactNode`	`"+"`	Element to place between grouped keys.

Accepts all standard HTML attributes.