Kbd

Used to display textual user input from keyboard.

@react.component
let make = () =>
  <div className="flex flex-col items-center gap-4">

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Kbd
Copy

Usage

Copy<Kbd> {"Ctrl"->React.string} </Kbd>

Examples

Group

Use the Kbd.Group component to group keyboard keys together.

@react.component
let make = () =>
  <div className="flex flex-col items-center gap-4">

Button

Use the Kbd component inside a Button component to display a keyboard key inside a button.

@react.component
let make = () =>
  <Button variant=Outline>

Tooltip

You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.

@react.component
let make = () =>
  <div className="flex flex-wrap gap-4">

Input Group

You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.

@react.component
let make = () =>
  <div className="flex w-full max-w-xs flex-col gap-6">

API Reference

Kbd

Use the Kbd component to display a keyboard key.

Copy<Kbd> {"Ctrl"->React.string} </Kbd>

Kbd.Group

Use the Kbd.Group component to group Kbd components together.

Copy<Kbd.Group>
  <Kbd> {"Ctrl"->React.string} </Kbd>
  <Kbd> {"B"->React.string} </Kbd>
</Kbd.Group>