Kbd

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdDemo() {

The kbd component renders a key cap — a styled native <kbd> element with no primitive dependency, dressed in the neobrutalist recipe: thick borders, hard shadow, and mono type. Both backend variants ship the same file.

Reach for it when:

• Command palettes and search — show the ⌘ K hint next to the trigger or inside the input.
• Menu items and tooltips — put the shortcut beside the action label so users learn it in place.
• Docs and changelogs — reference exact key presses inline without screenshots.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
npx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/kbd.json
Copy

import { cn } from "@/lib/utils"

function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded border-2 bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground shadow-sm select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
        className
      )}
      {...props}
    />
  )
}

function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <kbd
      data-slot="kbd-group"
      className={cn("inline-flex items-center gap-1", className)}
      {...props}
    />
  )
}

export { Kbd, KbdGroup }

Usage#

Copyimport { Kbd } from "@/components/ui/kbd"

Copy<Kbd>Ctrl</Kbd>

Composition#

Use the following composition to build Kbd and KbdGroup:

CopyKbd
KbdGroup
├── Kbd
└── Kbd

Examples#

Group#

Use the KbdGroup component to group keyboard keys together.

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdGroupExample() {

Button#

Use the Kbd component inside a Button component to display a keyboard key inside a button.

import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"

Tooltip#

You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd, KbdGroup } from "@/components/ui/kbd"

Input Group#

You can use the Kbd component inside an InputGroupAddon component to display a keyboard key inside an input group.

import { SearchIcon } from "lucide-react"

import {

RTL#

To enable RTL support in Neobrutalism.com, see the RTL configuration guide.

"use client"

import * as React from "react"

Accessibility#

Kbd renders a native <kbd> element — the correct HTML semantics for keyboard input — and is purely presentational: pointer-events-none, select-none, nothing focusable. When a shortcut actually works, also declare it on the control that handles it via aria-keyshortcuts (e.g. aria-keyshortcuts="Control+B" on the button) so assistive tech can announce it. Symbol glyphs like ⌘ are announced inconsistently by screen readers — spell out key names where the shortcut matters.

API Reference#

Kbd#

Use the Kbd component to display a keyboard key.

Copy<Kbd>Ctrl</Kbd>

KbdGroup#

Use the KbdGroup component to group Kbd components together.

Copy<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>