Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Kbd

Kbd

Used to display textual user input from keyboard.

Preview

⌘⇧⌥⌃Ctrl+B

Installation

npx shadcn@latest add https://ui.saturation.io/r/kbd.json

Usage

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

<Kbd>Ctrl</Kbd>

Examples

Group

Use the KbdGroup 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``

KbdGroup

Use the KbdGroup component to group Kbd components together.

PropTypeDefault
classNamestring``

On This Page

  • Preview
  • Installation
  • Usage
  • Examples
  • API Reference

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.