Fabrials UI

Loading state

Open the palette with CtrlK, or go to the inbox with gtheni

Installation

Import the control from @fabrials/ui, after setting the app up.
TypeScript
```
import { Kbd, KbdGroup, useModifierKey } from "@fabrials/ui";
```
Or install it under shadcn's name, so code that imports @/components/ui/kbd gets this control. See shims.
```
npx shadcn@latest add @fabrials/kbd
```

API reference

Prop / export	Type	Description
`children`	`ReactNode`	The key label, such as Ctrl or K.
`Kbd mod`	`boolean`	Prints the main modifier of this device: Ctrl on the server and at first paint, the command key on Apple devices right after hydration.
`KbdGroup sequence`	`boolean`	Keys pressed one after the other: the separator word goes between them, muted.
`KbdGroup separator`	`ReactNode`	The word between keys of a sequence (default then). It is copy: translate it.
`useModifierKey()`	`() => Ctrl \| ⌘`	The same value for a label you build yourself. The shortcut itself should test ctrlKey or metaKey.

Behavior

This is a flat label. It is not a 3D keycap. Show the modifier with mod or useModifierKey so the markup never mismatches on hydration.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.