Kbd

1import type * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5export function Kbd({
6  className,
7  ...props
8}: React.ComponentProps<"kbd">): React.ReactElement {
9  return (
10    <kbd
11      className={cn(
12        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
13        className,
14      )}
15      data-slot="kbd"
16      {...props}
17    />
18  );
19}
20 
21export function KbdGroup({
22  className,
23  ...props
24}: React.ComponentProps<"kbd">): React.ReactElement {
25  return (
26    <kbd
27      className={cn("inline-flex items-center gap-1", className)}
28      data-slot="kbd-group"
29      {...props}
30    />
31  );
32}