Kbd
A key to press: a small raised slab cut on both sides, with the key's name in the text face.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/kbdExamples
Keys in a sentence
Open the palette with ⌘K, take the job with Enter.
Fold the sidebar: Ctrl + B
import { Kbd, KbdGroup } from "@/components/zero/kbd";export default function KbdShortcuts() { return ( <div className="grid gap-3 font-medium font-zero-text text-zero-md text-zero-text-2"> <p> Open the palette with{" "} <KbdGroup> <Kbd>⌘</Kbd> <Kbd>K</Kbd> </KbdGroup> , take the job with <Kbd>Enter</Kbd>. </p> <p className="text-zero-sm"> Fold the sidebar: <Kbd>Ctrl</Kbd> + <Kbd>B</Kbd> </p> </div> );}Behaviour
It is sized in em, so it follows the text around it. KbdGroup sets the keys of a chord close together.