Kbd

Preview

⌘⇧⌥⌃Ctrl+B

import { Kbd, KbdGroup } from "@/registry/axon/ui/kbd";

export default function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>⇧</Kbd>
        <Kbd>⌥</Kbd>
        <Kbd>⌃</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>B</Kbd>
      </KbdGroup>
    </div>
  );
}

import { Kbd, KbdGroup } from "@/registry/axon/ui/kbd";export default function KbdDemo() {  return (    <div className="flex flex-col items-center gap-4">      <KbdGroup>        <Kbd>⌘</Kbd>        <Kbd>⇧</Kbd>        <Kbd>⌥</Kbd>        <Kbd>⌃</Kbd>      </KbdGroup>      <KbdGroup>        <Kbd>Ctrl</Kbd>        <span>+</span>        <Kbd>B</Kbd>      </KbdGroup>    </div>  );}

Installation

CLI

npx shadcn@latest add @emberui/kbd

yarn shadcn@latest add @emberui/kbd

pnpm dlx shadcn@latest add @emberui/kbd

bunx --bun shadcn@latest add @emberui/kbd

Reference

This component is based on the shadcn/ui Kbd component.

Kbd

Preview

Installation

CLI

Reference

On this page