Klarhimmel UI
Klarhimmel ↗

Kbd

Stable

A keyboard key, for shortcuts in text and menus.

npx shadcn add @klarhimmel/kbd

When to use

  • Use for

    Keyboard shortcuts in text and menus.

  • Not for

    Decoration.

  • Pairs with

    Search triggers, help text.

Preview

  • Search the rooms: ⌘ K
  • New booking: N
  • Close anything open: Esc
kbd.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Kbd } from '@/components/klarhimmel/ui/kbd';

export default function Example() {
  return (
    <Theme theme="brand">
      <p>Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search.</p>
    </Theme>
  );
}

Install

Import

import { Kbd } from '@/components/klarhimmel/ui/kbd';
Lands in
components/klarhimmel/ui/kbd.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

API reference

PropTypeDefaultDescription
childrenReactNode-Required. The key.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
TabSkips it: Kbd only displays a key

Screen readers read the key as text. Write what it does next to it.

Accessibility