Kbd

import { Kbd } from "@/components/ui/kbd";

export default function Example() {
  return (
    <span className="text-body-medium text-fg-secondary">
      Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search the menu.
    </span>
  );
}

#Installation

$ npx uix-ui@latest add kbd

This copies the file into components/ui/kbd.tsx in your project. npx shadcn@latest add @uix/kbd works too.

#Usage

import { Kbd } from "@/components/ui/kbd";

<span className="text-body-medium text-fg-secondary">
  Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search the menu.
</span>

#Props

Everything else is passed to the root element, so className, aria-* and event handlers work as usual.

#Dependencies

Installed for you by the CLI.

• class-variance-authority
• clsx
• tailwind-merge

• lib/utils.ts