Kbd
Inline keyboard hint with a hand-drawn border.
Press
ā
K
<Kbd roughness={1.5}>ā</Kbd> <Kbd roughness={1.5}>K</Kbd>CLI install
npx doodleui-react add kbd
Usage
import { Kbd } from "doodleui-react";
<Kbd>ā</Kbd> <Kbd>K</Kbd>
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| animate | boolean | true | Draw-in the key border on mount. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate. |
| roughness | number | 1.5 | How wobbly the stroke is. 0 is almost geometric. 3+ is messy. |
| seed | number | provider / random | Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed. |
| sketchColor | string | #1f1d1a | Stroke color. Also tints primary/accent fills where relevant. |
| className | string | undefined | Passed through to the root element. |
| style | CSSProperties | undefined | Passed through to the root element. |