A B C Shift Enter Delete

+ K

+ C

+

Esc

Press + K to open command menu

); } `,__src__:"registry/default/examples/kbd-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Kbd } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/kbd"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" KbdDemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex flex-col space-y-4"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex flex-wrap items-center gap-4"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">A"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">B"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">C"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Shift"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Enter"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Delete"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex flex-wrap items-center gap-4"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex items-center gap-1"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" icon"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"command"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">+"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">K"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex items-center gap-1"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" icon"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"ctrl"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">+"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">C"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex items-center gap-1"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" icon"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"alt"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">+"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" icon"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"tab"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex flex-wrap items-center gap-4"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"tooltip"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Esc"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"tooltip"'}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" icon"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"shift"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"tooltip"'}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" icon"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"enter"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex flex-wrap items-center gap-1"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-sm text-muted-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Press"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" icon"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"mod"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-sm text-muted-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">+"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">K"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-sm text-muted-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" to open command menu"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),` `,(0,l.jsxs)(n.h2,{id:"installation",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(p,{defaultValue:"cli",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(t,{value:"cli",children:"CLI"}),(0,l.jsx)(t,{value:"manual",children:"Manual"})]}),(0,l.jsx)(d,{value:"cli",children:(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npx shadcn@latest add "https://ui.fingertip.com/r/styles/default/kbd" `,__npmCommand__:`npx shadcn@latest add "https://ui.fingertip.com/r/styles/default/kbd" `,__yarnCommand__:`npx shadcn@latest add "https://ui.fingertip.com/r/styles/default/kbd" `,__pnpmCommand__:`pnpm dlx shadcn@latest add "https://ui.fingertip.com/r/styles/default/kbd" `,__bunCommand__:`bun x --bun shadcn@latest add "https://ui.fingertip.com/r/styles/default/kbd" `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "https://ui.fingertip.com/r/styles/default/kbd"'})]})})})})}),(0,l.jsx)(d,{value:"manual",children:(0,l.jsxs)(i,{children:[(0,l.jsx)(s,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(a,{name:"kbd",children:(0,l.jsx)(n.figure,{__src__:"registry/default/ui/kbd.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { ArrowCornerDownLeftIcon, ArrowDownIcon, ArrowLeftXIcon, ArrowUpIcon, ArrowWall2RightIcon, CmdIcon, ShiftIcon, } from "@fingertip/icons"; import { cva, VariantProps } from "class-variance-authority"; import * as React from "react"; import { cn } from "@/lib/utils"; type KbdIcon = | "mod" | "shift" | "enter" | "command" | "ctrl" | "alt" | "tab" | "backspace" | "up" | "down"; const kbdVariants = cva( "pointer-events-none h-5 select-none justify-center items-center gap-0.5 px-1.5 rounded-sm ring-1 ring-inset flex font-mono text-[10px] font-medium", { variants: { variant: { default: "bg-muted text-foreground ring-border", tooltip: "bg-gray-700 text-white ring-gray-600", }, }, defaultVariants: { variant: "default", }, }, ); interface KbdProps extends React.HTMLAttributes, VariantProps { children?: React.ReactNode; icon?: KbdIcon; } const iconMap: Record = { mod: , shift: , enter: , command: , ctrl: "Ctrl", alt: "Alt", tab: , backspace: , up: , down: , }; const Kbd = React.forwardRef( ({ className, variant, children, icon, ...props }, ref) => { const content = icon ? iconMap[icon] : children; return ( {content} ); }, ); Kbd.displayName = "Kbd"; export { Kbd }; `,__src__:"registry/default/ui/kbd.tsx",__style__:"default",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ArrowCornerDownLeftIcon,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ArrowDownIcon,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ArrowLeftXIcon,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ArrowUpIcon,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ArrowWall2RightIcon,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" CmdIcon,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ShiftIcon,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@fingertip/icons"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { cva, VariantProps } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "class-variance-authority"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" KbdIcon"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "mod"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "shift"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "enter"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "command"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "ctrl"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "alt"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "tab"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "backspace"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "up"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "down"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" kbdVariants"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" cva"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "pointer-events-none h-5 select-none justify-center items-center gap-0.5 px-1.5 rounded-sm ring-1 ring-inset flex font-mono text-[10px] font-medium"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" variants: {"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" variant: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" default: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"bg-muted text-foreground ring-border"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" tooltip: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"bg-gray-700 text-white ring-gray-600"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" defaultVariants: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" variant: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"default"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" KbdProps"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" React"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLElement"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" VariantProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"typeof"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" kbdVariants> {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" children"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" React"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"ReactNode"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" icon"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" KbdIcon"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" iconMap"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Record"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"KbdIcon"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"React"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"ReactNode"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"> "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" mod: <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"CmdIcon"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-3"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shift: <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ShiftIcon"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-3"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" enter: <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ArrowCornerDownLeftIcon"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-3"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" command: <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"CmdIcon"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-3"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ctrl: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Ctrl"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" alt: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Alt"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" tab: <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ArrowWall2RightIcon"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-3"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" backspace: <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ArrowLeftXIcon"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-3"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" up: <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ArrowUpIcon"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-3"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" down: <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ArrowDownIcon"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-3"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />,"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" Kbd"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" React."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"forwardRef"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLElement"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"KbdProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ({ "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"variant"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"children"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"icon"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" content"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" iconMap[icon] "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" children;"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"kbd"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"kbdVariants"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({ variant, className }))}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {content}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"Kbd.displayName "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "Kbd"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Kbd };"})]})]})})})}),(0,l.jsx)(s,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,l.jsxs)(n.h2,{id:"usage",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Kbd } from "@/components/ui/kbd"; `,children:(0,l.jsx)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Kbd } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/kbd"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]})})})}),` `,(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`{/* Example usage */} `,children:(0,l.jsx)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Kbd"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">{"}),(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:"/* Example usage */"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]})})})}),` `,(0,l.jsxs)(n.h2,{id:"props",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Prop"}),(0,l.jsx)(n.th,{children:"Type"}),(0,l.jsx)(n.th,{children:"Default"}),(0,l.jsx)(n.th,{children:"Description"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"className"})}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"string"})}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"-"})}),(0,l.jsx)(n.td,{children:"The class name to apply to the component."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"children"})}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"ReactNode"})}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"-"})}),(0,l.jsx)(n.td,{children:"The content to display in the component."})]})]})]})]})}function b(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(m,{...e})}):m(e)}function c(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(N);})(); ;return Component;

Prop	Type	Default	Description
`className`	`string`	`-`	The class name to apply to the component.
`children`	`ReactNode`	`-`	The content to display in the component.