Components

Kbd

A keyboard key cap with a raised bottom edge.

Ctrl+KShift+↵?

Press the real combo — the cap sinks with it.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add kbd

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Kbd } from "@lumora/ui/components/kbd";
// or from the barrel:
import { Kbd } from "@lumora/ui";

Props worth knowing

combo like "mod+k" renders platform glyphs — ⌘ on Mac, Ctrl elsewhere — and plain children work too. With listen, the cap physically presses down whenever the real combo is struck. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.