Kbd

Kbd is a native kbd drawn as a keycap: pixel caps in an ink frame, its lower edge dithered for depth. Write a shortcut as keys side by side. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { Kbd } from "@/components/dithercharts/kbd"

<Kbd>⌘</Kbd><Kbd>K</Kbd>
<p>Press <Kbd>Esc</Kbd> to close</p>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add kbd

Props

It renders a native element, so every other attribute that element takes passes through.