Primitives
Kbd
Keyboard shortcut chip and chord group.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Parts
Exported compound parts from the installed source.
Kbd└── KbdGroupThe refined source installs this primitive from src/registry/sources/refined/ui/kbd.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/kbd.jsonRaw code
Primary installed primitive source
Kbd slot
src/registry/sources/refined/ui/kbd.tsx
import type { ComponentProps } from "react";import { cn } from "@/components/refined-ui/lib/cn";import { skinSlot } from "@/components/refined-ui/skin";// Refined skin slot: keyboard key chip sharing --radius-control w/ buttons/fields (⌘K hint matches corner). Pure markup, no dep.// KbdGroup lays out a chord (⌘+K) with hairline separators.export function Kbd({ className, ...props }: ComponentProps<"kbd">) { return ( <kbd data-ui="agent" data-slot="kbd" className={cn( "inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded-[var(--radius-control)] px-1.5 font-sans text-micro font-medium text-muted-foreground ring-1 ring-inset ring-border bg-card/60 shadow-sm", skinSlot("kbd", {}), className, )} {...props} /> );}export function KbdGroup({ className, ...props }: ComponentProps<"span">) { return ( <span data-ui="agent" data-slot="kbd-group" className={cn("inline-flex items-center gap-1", skinSlot("kbd-group", {}), className)} {...props} /> );}