Kbd

free

Kbd renders compact keyboard hints for shortcuts, menus, and command footers.

Navigate: UpDown

Select: Enter

Close: Esc

import Kbd from '@/components/ui/kbd';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Kbd

pnpm dlx nateui@latest add Kbd

yarn dlx nateui@latest add Kbd

EscTabEnter⌘K

import Kbd from '@/components/ui/kbd';

export default function BasicDemo() {
  return (

Open command menuCtrl+K

Save changesCtrl+S

import Kbd from '@/components/ui/kbd';

export default function CombinationsDemo() {
  return (

Esc

import { PiArrowElbowDownLeft, PiCommand } from 'react-icons/pi'
import Kbd from '@/components/ui/kbd';

export default function IconContentDemo() {

escSpaceF

import Kbd from '@/components/ui/kbd';

export default function CustomClassDemo() {
  return (

Kbd renders a native kbd element. String children receive the component's monospace key-label treatment.

Prop	Description	Type	Default
`children`	Key label or custom node rendered inside the keycap.	`ReactNode`	-
`className`	Additional classes appended to the keycap.	`string`	-
`...nativeKbdProps`	Native props for the underlying `kbd` element.	`NativeKbdProps`	-

type NativeKbdProps = ComponentProps<'kbd'>;