Components

Kbd

A compact keyboard key label for shortcuts, hints, and small inline command references.

Loading...

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

1

Install the component

Run the registry command below to add kbd to your project.

watermelon add kbd
2

Import the component

Import Kbd from your local UI registry output.

Import

import { Kbd } from "@/components/ui/kbd";

Import

Import

import { Kbd, KbdGroup } from "@/components/ui/kbd";

Usage

Use Kbd for shortcut hints and small instructional combinations.

Loading...

API Reference

proptypedefaultdescription
childrenReactNode-The visible key label.