ReScript Shadcn
Get started
  • Installation
Components
  • Accordion
  • Alert
  • AlertDialog
  • AspectRatio
  • Attachment
  • Avatar
  • Badge
  • Breadcrumb
  • Bubble
  • Button
  • ButtonGroup
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • ContextMenu
  • DataTable
  • DatePicker
  • Dialog
  • Direction
  • Drawer
  • DropdownMenu
  • Empty
  • Field
  • HoverCard
  • Input
  • InputGroup
  • InputOtp
  • Item
  • Kbd
  • Label
  • Marker
  • Menubar
  • Message
  • MessageScroller
  • NativeSelect
  • NavigationMenu
  • Pagination
  • Popover
  • Progress
  • RadioGroup
  • Resizable
  • ScrollArea
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toast
  • Toggle
  • ToggleGroup
  • Tooltip
  • Typography

Kbd

Used to display textual user input from keyboard.

⌘⇧⌥⌃Ctrl+B

Installation#

npx shadcn@latest add @rescript-shadcn/Kbd

Usage#

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

Examples#

Group#

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

Use Ctrl + BCtrl + K to open the command palette

Button#

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

Tooltip#

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

Input Group#

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

⌘K

API Reference#

Kbd#

Use the Kbd component to display a keyboard key.

PropTypeDefault
classNamestring``
<Kbd> {"Ctrl"->React.string} </Kbd>

Kbd.Group#

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

PropTypeDefault
classNamestring``
<Kbd.Group>
  <Kbd> {"Ctrl"->React.string} </Kbd>
  <Kbd> {"B"->React.string} </Kbd>
</Kbd.Group>
@react.component
let make = () =>
  <div className="flex flex-col items-center gap-4">
@react.component
let make = () =>
  <div className="flex flex-col items-center gap-4">
@react.component
let make = () =>
  <Button variant=Outline>
@react.component
let make = () =>
  <div className="flex flex-wrap gap-4">
@react.component
let make = () =>
  <div className="flex w-full max-w-xs flex-col gap-6">