saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Kbd

Kbd

Displays a keyboard shortcut or key combination.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/kbd

Usage

import { Kbd } from "@/components/ui/kbd"
<Kbd>⌘K</Kbd>

Examples

Group

Loading...
Key combinations with KbdGroup.

Button

Loading...
Kbd inside buttons.

Tooltip

Loading...
Kbd inside tooltips.

Input Group

Loading...
Kbd inside input groups.

API Reference

PropTypeDefaultDescription
children*React.ReactNode—The keyboard key(s) to display.

On This Page

  • Installation
  • Usage
  • Examples
  • Group
  • Button
  • Tooltip
  • Input Group
  • API Reference
⌘K
Ctrl+C
Enter
Ctrl+BCtrl+KCtrl+Shift+P
⌘K