novixuiv0.1
Install

Components · v0.1 · Stable

Kbd

Render keyboard shortcuts as physical, semantic key caps. Pair with KbdSequence for platform-aware chords like ⌘K on macOS and Ctrl+K on Windows.

Example

The command palette shortcut, adjusted for macOS.

modK

Installation

Install and import.

tsx
npx @novix-ui/cli add kbd
tsx
import { Kbd, KbdSequence } from "@novix-ui/react";

When to use

Use it for

  • Menu items with shortcuts
  • Command palette rows
  • Tooltip hints ("Press K")
  • Docs and onboarding tours

Skip it for

  • Inline code — that's what <code> is for.
  • Long strings that aren't a single key

Playground

⌘

Playground

md
default

Sizes

⌘⌘⌘⌘

Sequences

Use mod to write the shortcut once and let the component pick ⌘ or Ctrl per platform.

modKshift?modshiftP

API

Kbd

Prop
Type
Default
Description
  • size
    "xs" | "sm" | "md" | "lg"
    "md"
    Cap size.
  • tone
    "default" | "subtle" | "inverted"
    "default"
    Surface treatment.
  • pressed
    boolean
    false
    Sink the cap to reflect an active/held state.

KbdSequence

Prop
Type
Default
Description
  • keys
    (string | ReactNode)[]
    —
    Ordered list of keys or Kbd nodes.
  • separator
    ReactNode
    "+"
    Visual glue between caps.
  • platform
    "auto" | "mac" | "pc"
    "auto"
    Substitutes ⌘/⌥ or Ctrl/Alt as appropriate.

Accessibility

Design guidelines

One tone per surface

Menus stay subtle. The command palette uses default. Don't mix.

Order matches typing

Write modifiers left-to-right in the order the user presses them.

Show the shortcut once

Menu item + tooltip is redundant. Pick one.

Common mistakes

  • Hard-coding "⌘" — Windows users won't see the right glyph. Use "mod".
  • Rendering a shortcut with no keyboard handler wired up. The cap is a promise — keep it.