Kbd & code

Shows keyboard keys and inline code in text.

Press Esc to close the dialog.

Set aria-label on icon-only controls.

kbd-code-demo.tsx

import { InlineCode, Kbd } from "@/components/vip-ui/kbd-code";export function KbdCodeDemo() {  return (    <div className="max-w-md space-y-4 text-sm leading-7">      <p>        Press <Kbd>Esc</Kbd> to close the dialog.      </p>      <p>        Set <InlineCode>aria-label</InlineCode> on icon-only controls.      </p>    </div>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-kbd-code.json

Composition

KbdGroup
Joins the keys of one shortcut.
- KbdRepeats
InlineCode

Key combination

Put the keys of one shortcut in KbdGroup.

Press CtrlK to open search.

Press CtrlShiftP to show all commands.

kbd-code-group-demo.tsx

import { Kbd, KbdGroup } from "@/components/vip-ui/kbd-code";export function KbdCodeGroupDemo() {  return (    <div className="max-w-md space-y-4 text-sm leading-7">      <p>        Press{" "}        <KbdGroup>          <Kbd>Ctrl</Kbd>          <Kbd>K</Kbd>        </KbdGroup>{" "}        to open search.      </p>      <p>        Press{" "}        <KbdGroup>          <Kbd>Ctrl</Kbd>          <Kbd>Shift</Kbd>          <Kbd>P</Kbd>        </KbdGroup>{" "}        to show all commands.      </p>    </div>  );}

Long code

InlineCode wraps a long value and keeps its padding on each line.

Copy the file to src/components/vip-ui/description-list.tsx and update the imports.

kbd-code-wrap-demo.tsx

import { InlineCode } from "@/components/vip-ui/kbd-code";export function KbdCodeWrapDemo() {  return (    <p className="max-w-64 text-sm leading-7">      Copy the file to{" "}      <InlineCode>src/components/vip-ui/description-list.tsx</InlineCode> and      update the imports.    </p>  );}