Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Standalone keys
  • Grouped shortcuts
  • Inline text composition
  • Action composition
  • Recommendations
  • Usage boundaries
  • API reference

Typography

Kbd

Displays keyboard keys and grouped shortcuts with fixed native kbd anatomy.

idle

Usage

import { Kbd, KbdGroup } from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<KbdGroup>
	<Kbd />
</KbdGroup>

Examples

Standalone keys

Single key caps represent individual keystrokes, modifier keys, and navigation controls.

Grouped shortcuts

Compose related key sequences with KbdGroup to present multi-key combinations.

Inline text composition

Keys and shortcut groups sit inline with instructional body text to explain keyboard navigation.

Action composition

Pair shortcut indicators with action triggers to display available hotkeys directly on controls.

Recommendations

GuidancePractice
Do

Show shortcuts that actually work and match the user's platform when the application supports it.

Usage boundaries

GuidanceBoundary
Scope

Kbd describes keys. Shortcut registration, conflicts, and discoverability belong to the application.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
KbdKbdProps—Single-key keyboard affordance with a fixed native kbd semantic host.
KbdGroupKbdGroupProps—Grouped-shortcut container for key combinations with a fixed native kbd semantic host.
PreviousHeadingNextLabel

Search

CmdK

Create an issue

C

Go to inbox

GI

Toggle the sidebar

Cmd/
KCmdCtrlShiftEscTabEnter
CmdKCmdShiftPCtrlAltDelete

Press CmdK anywhere to open the global command palette.

Use Tab and Shift to navigate focusable controls, or press Esc to dismiss active overlays.