1. Home
  2. Docs
  3. Components
  4. Typography
  5. Kbd

Kbd

Keyboard component.

Usage

KbdExample.tsx
  1. 1
  2. 2
  3. 3
<P>
	Press <Kbd>Command + Tab</Kbd> to switch between open apps on macOS.
</P>

Here's the <Kbd /> component in action.

Press Command + Tab to switch between open apps on macOS.

Features

  • Drop-in replacement for the native <kbd> element.
  • Opts-in to your design system's typographic styles.

Source

kbd.tsx
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
import { forwardRef, type HTMLAttributes } from 'react'
import { cn } from '#app/utils/tailwind-merge'


const Kbd = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(({ className, ...props }, ref) => <kbd ref={ref} className={cn('kbd', className)} {...props} />)
Kbd.displayName = 'Kbd'


export { Kbd }

Styling

tailwind.css
  1. 1
  2. 2
  3. 3
.kbd {
	@apply border-spacing-fluid-1 border-muted-200 bg-muted-50 pb-fluid-3 pt-fluid-4 px-fluid-4 text-fluid-xs text-muted-900 rounded-lg border align-baseline font-mono shadow-sm;
}