Components

Kbd

Keyboard shortcut chip and chord group.

Single keyEsc

Command palette⌘K

Send message⌘↵

Inline hint⌘K

Composition

Keyboard chord

<KbdGroup>
- <Kbd />
</KbdGroup>

Installation

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/kbd.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/kbd.json

See registry manifest

Raw code

Primary installed source

src/registry/sources/control-ui/ui/kbd.tsx

import type { ComponentProps, CSSProperties } from "react";

import type { KbdKnobStyle } from "@/components/control-ui/knob-contracts/kbd-knobs";

import { cn } from "@/components/control-ui/lib/cn";

export const kbdVariants = ["default", "ghost"] as const;

export type KbdVariant = (typeof kbdVariants)[number];

export type KbdProps = Omit<ComponentProps<"kbd">, "style"> & { variant?: KbdVariant; style?: CSSProperties & KbdKnobStyle };

export function Kbd({ variant = "default", className, ...props }: KbdProps) {

return (

<kbd

data-control-ui="kbd"

data-control-family="kbd"

data-slot="root"

data-variant={variant}

className={cn("inline-flex select-none items-center justify-center", className)}

{...props}

/>

);

}

export function KbdGroup({ className, ...props }: ComponentProps<"span"> & { style?: CSSProperties & KbdKnobStyle }) {

return (

<span

data-control-ui="kbd"

data-control-family="kbd"

data-slot="group"

className={cn("inline-flex items-center", className)}

{...props}

/>

);

}

Knobs

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-kbd-* · 5 knobsHow the cascade resolves

--cui-kbd-radius<length-percentage>var(--radius-control)

--cui-kbd-background<color>oklch(from var(--card) l c h / 0.6)

--cui-kbd-foreground<color>var(--muted-foreground)

--cui-kbd-border-color<color>var(--control-rim)

--cui-kbd-shadow*var(--shadow-sm)