Completeness: styles-sufficient

The stylesheet is the whole component. There is no keyboard map beyond what the native element already does and nothing sets state at runtime that the CSS keys on, so a CSS-only port reproduces it.

Import

import { Kbd } from "@blakeui/react";

Usage

⌘K⇧P⌃C⌥D

import {Kbd} from "@blakeui/react";

export function Basic() {
  return (
    <div className="flex items-center gap-4">

Anatomy

Import the Kbd component and access all parts using dot notation.

import { Kbd } from "@blakeui/react";

export default () => (
  <Kbd>
    <Kbd.Abbr title="Command">⌘</Kbd.Abbr>
    <Kbd.Content>K</Kbd.Content>
  </Kbd>
);

Arrow Keys:

↑↓←→

Page Navigation:

⇞⇟↖↘

import {Kbd} from "@blakeui/react";

export function NavigationKeys() {
  return (
    <div className="flex flex-col gap-4">

Inline Usage

Press Esc to close the dialog.

Use ⌘K to open the command palette.

Navigate with ↑ and ↓ arrow keys.

Save your work with ⌘S regularly.

import {Kbd} from "@blakeui/react";

export function InlineUsage() {
  return (
    <div className="space-y-4">

Instructional Text

Quick Actions

• Open search: ⌘K
• Toggle sidebar: ⌘B
• New file: ⌘N
• Quick save: ⌘S

import {Kbd} from "@blakeui/react";

export function InstructionalText() {
  return (
    <div className="space-y-3">

Special Keys

Press ↵ to confirm or ⎋ to cancel.

Use ⇥ to navigate between form fields and ⇧⇥ to go back.

Hold ␣ to temporarily enable panning mode.

import {Kbd} from "@blakeui/react";

export function SpecialKeys() {
  return (
    <div className="space-y-3">

Variants

Copy:⌘C⌘C

Paste:⌘V⌘V

Cut:⌘X⌘X

Undo:⌘Z⌘Z

Redo:⌘⇧Z⌘⇧Z

import {Kbd} from "@blakeui/react";

export function Variants() {
  return (
    <div className="flex flex-col gap-4">

Styling

Passing Tailwind CSS classes

import { Kbd } from "@blakeui/react";

function CustomKbd() {
  return (
    <Kbd className="bg-gray-100 dark:bg-gray-800">
      <Kbd.Content>K</Kbd.Content>
    </Kbd>
  );
}

Customizing the component classes

To customize the Kbd component classes, you can use the @layer components directive.
Learn more.

A worked example is in Styling.

blakeUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Kbd component uses these CSS classes (View source styles):

Base Classes

.kbd - Base keyboard key styles with background, border, and spacing
.kbd__abbr - Abbreviation element for modifier keys
.kbd__content - Content wrapper for key text

API Reference

Kbd Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Content of the key
`variant`	`"default"	"light"`	`default`
`className`	`string`	-	Custom CSS classes

Kbd.Abbr Props

Prop	Type	Default	Description
`title`	`string`	-	Title attribute for accessibility (e.g., "Command" for ⌘)
`children`	`React.ReactNode`	-	The symbol or text to display (e.g., ⌘, ⌥, ⇧)
`className`	`string`	-	Custom CSS classes

Kbd.Key Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Text content of the key
`className`	`string`	-	Custom CSS classes

Kbd.Content Type

Available key values for the keyValue prop:

Modifier Keys	Special Keys	Navigation Keys	Function Keys
`command`	`enter`	`up`	`fn`
`shift`	`delete`	`down`
`ctrl`	`escape`	`left`
`option`	`tab`	`right`
`alt`	`space`	`pageup`
`win`	`capslock`	`pagedown`
	`help`	`home`
		`end`

Kbd

Quick Actions

On this page