Kbd

Displays which key or combination of keys to press on the keyboard.

Ctrl

1'use client';
2
3import { Kbd } from '@/components/ui/kbd';
4
5export function Default() {
6  return <Kbd>Ctrl</Kbd>;
7}

Installation

pnpm dlx mateui add kbd

Anatomy

1import { Kbd, KbdGroup } from '@/components/ui/kbd';

1<Kbd>Ctrl</Kbd>

1<KbdGroup>
2  <Kbd>Ctrl</Kbd>
3  <span>+</span>
4  <Kbd>K</Kbd>
5</KbdGroup>

Sizes

Use the size property to control the size of the <Kbd> component.

⌘⌘⌘

1'use client';
2
3import { Kbd } from '@/components/ui/kbd';
4
5export function Sizes() {
6  return (
7    <div className="flex items-center gap-4">
8      <Kbd size="sm">⌘</Kbd>
9      <Kbd size="default">⌘</Kbd>
10      <Kbd size="lg">⌘</Kbd>
11    </div>
12  );
13}

Variants

You can toggle the keyboard styles by providing a variant.

ShiftShift

1'use client';
2
3import { Kbd } from '@/components/ui/kbd';
4
5export function Variants() {
6  return (
7    <div className="flex items-center gap-4">
8      <Kbd variant="default">Shift</Kbd>
9      <Kbd variant="outline">Shift</Kbd>
10    </div>
11  );
12}

Key Groups

Use the <KbdGroup> component to wrap multiple <Kbd> tags or group logically related commands with consistent spacing.

Ctrl+⇧+K

1'use client';
2
3import { Kbd, KbdGroup } from '@/components/ui/kbd';
4
5export function WithGroup() {
6  return (
7    <div className="flex items-center gap-6">
8      <KbdGroup>
9        <Kbd abbrTitle="Control">Ctrl</Kbd>
10        <span>+</span>
11        <Kbd abbrTitle="Shift">⇧</Kbd>
12        <span>+</span>
13        <Kbd>K</Kbd>
14      </KbdGroup>
15    </div>
16  );
17}

API Reference

Kbd

Additional HTML properties like className are spread directly to the <kbd> element.

Prop	Type	Default	Description
`size`	`'default' \| 'sm' \| 'lg'`	`'default'`	Adjusts the interactive component's dimensions
`variant`	`'default' \| 'outline'`	`'default'`	Visual style of the element
`abbrTitle`	`string`	-	Adds a title attribute, useful for abbreviations

KbdGroup

Container for styling keyboard tags. Accepts common HTML properties (HTMLAttributes<HTMLSpanElement>).

PreviousInput NextLabel