Kbd

 1import { Kbd } from "@/components/wensity/kbd";
 2
 3export function ShortcutKeys() {
 4  return (
 5    <div className="flex flex-wrap items-center gap-3">
 6      <Kbd keys={["⌘", "K"]} />
 7      <Kbd keys={["⌘", "Shift", "P"]} />
 8      <Kbd keys={["Ctrl", "D"]} />
 9    </div>
10  );
11}

 1import { Kbd } from "@/components/wensity/kbd";
 2
 3export function InlineKeys() {
 4  return (
 5    <div className="max-w-sm text-sm leading-relaxed">
 6      <p className="mb-2">
 7        Press <Kbd inline>⌘</Kbd><Kbd inline>J</Kbd> to toggle the terminal.
 8      </p>
 9      <p>
10        Hold <Kbd inline>⌥</Kbd> and click to add a new cursor.
11      </p>
12    </div>
13  );
14}

 1import { Kbd } from "@/components/wensity/kbd";
 2
 3export function KeySequence() {
 4  return (
 5    <Kbd.Sequence>
 6      <Kbd>⌘</Kbd><Kbd>K</Kbd>
 7      <span className="px-1 text-[11px] text-neutral-500">then</span>
 8      <Kbd>G</Kbd>
 9    </Kbd.Sequence>
10  );
11}

 1import { Kbd } from "@/components/wensity/kbd";
 2
 3export function CommandList() {
 4  return (
 5    <div className="flex w-full max-w-xs flex-col gap-2">
 6      <Kbd.Command keys={["⌘", "K"]}>Toggle Search</Kbd.Command>
 7      <Kbd.Command keys={["⌘", "Shift", "P"]}>Command Palette</Kbd.Command>
 8      <Kbd.Command keys={["⌘", "B"]}>Toggle Sidebar</Kbd.Command>
 9    </div>
10  );
11}