Kbd

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
6  return (
7    <kbd
8      data-slot="kbd"
9      className={cn(
10        "inline-flex min-w-5 items-center justify-center rounded-md border border-foreground/12 bg-foreground/[.055] px-1.5 py-0.5 font-mono text-[0.68rem] font-semibold leading-none text-muted-foreground shadow-[inset_0_-1px_0_color-mix(in_oklch,var(--foreground)_10%,transparent),inset_0_1px_0_color-mix(in_oklch,var(--background)_75%,transparent)]",
11        className,
12      )}
13      {...props}
14    />
15  );
16}
17 
18function KbdGroup({ className, ...props }: React.ComponentProps<"span">) {
19  return (
20    <span
21      data-slot="kbd-group"
22      className={cn("inline-flex items-center gap-1", className)}
23      {...props}
24    />
25  );
26}
27 
28export { Kbd, KbdGroup };