Kbd

⌘⇧⌥⌃Ctrl+B

import { Kbd, KbdGroup } from "uilab-core"

export function KbdPreview() {
  return (
    <div className="flex flex-col items-center gap-4">

Usage

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

<Kbd>Ctrl</Kbd>

Use the KbdGroup component to group keyboard keys together.

Use Ctrl + BCtrl + K to open the command palette

import { Kbd, KbdGroup } from "uilab-core"

export function KbdGroupExample() {
  return (
    <div className="flex flex-col items-center gap-4">

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

import { Button, Kbd } from "uilab-core"

export function KbdButtonExample() {
  return (
    <Button variant="outline">

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

import {
  Button,
  ButtonGroup,
  Kbd,
  KbdGroup,

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

⌘K

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  Kbd