Kbd

A keyboard key indicator component for displaying keyboard shortcuts and key combinations

KKK
+K
"use client";

import { Kbd } from "@/components/ui/kbd/kbd";
import styles from "./kbd-demo.module.css";

export default function KbdDemo() {
  return (
    <div className={styles.container}>
      <div className={styles.row}>
        <Kbd size="sm">K</Kbd>
        <Kbd size="md">K</Kbd>
        <Kbd size="lg">K</Kbd>
      </div>
      <div className={styles.row}>
        <Kbd>⌘</Kbd>
        <span className={styles.plus}>+</span>
        <Kbd>K</Kbd>
      </div>
    </div>
  );
}


npx shadcn@latest add @roiui/kbd
npx shadcn@latest add @roiui/kbd-tailwind

anatomy
<Kbd>K</Kbd>

Component props

Prop
Type
Default