︲

︲

Kbd

Used to display textual user input from keyboard.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component kbd

Anatomy

Use the following composition to build a Kbd component.

kbd() # or kbd_group( kbd(), kbd(), )

Examples

Default

A basic example showing a single styled keyboard key.

⌘⇧⌥⌃Ctrl+B
import reflex as rx
from components.ui.kbd import (
    kbd,
    kbd_group,
)


def kbd_default():
    """
    Example matching the shadcn KbdDemo component.
    Shows keyboard shortcuts with modifier keys.
    """
    return rx.box(
        # Mac modifier keys
        kbd_group(
            kbd("⌘"),
            kbd("⇧"),
            kbd("⌥"),
            kbd("⌃"),
        ),
        # Keyboard shortcut combination
        kbd_group(
            kbd("Ctrl"),
            rx.el.span("+"),
            kbd("B"),
        ),
        class_name="flex flex-col items-center gap-4 p-8",
    )

Common Shortcuts

Displays familiar keyboard shortcuts like copy or paste.

Save:

Ctrl+S

Copy:

Ctrl+C

Paste:

Ctrl+V

Undo:

Ctrl+Z
import reflex as rx
from components.ui.kbd import (
    kbd,
    kbd_group,
)


def kbd_common_shortcuts():
    """Common keyboard shortcuts"""
    return rx.box(
        rx.box(
            rx.text("Save:", class_name="text-sm font-medium mr-2"),
            kbd_group(
                kbd("Ctrl"),
                rx.el.span("+"),
                kbd("S"),
            ),
            class_name="flex items-center",
        ),
        rx.box(
            rx.text("Copy:", class_name="text-sm font-medium mr-2"),
            kbd_group(
                kbd("Ctrl"),
                rx.el.span("+"),
                kbd("C"),
            ),
            class_name="flex items-center",
        ),
        rx.box(
            rx.text("Paste:", class_name="text-sm font-medium mr-2"),
            kbd_group(
                kbd("Ctrl"),
                rx.el.span("+"),
                kbd("V"),
            ),
            class_name="flex items-center",
        ),
        rx.box(
            rx.text("Undo:", class_name="text-sm font-medium mr-2"),
            kbd_group(
                kbd("Ctrl"),
                rx.el.span("+"),
                kbd("Z"),
            ),
            class_name="flex items-center",
        ),
        class_name="flex flex-col gap-3 p-8",
    )

Special Keys

Shows styling for special keys such as Enter, Tab, or Esc.

EnterEscTabSpace←→↑↓DeleteBackspace
import reflex as rx
from components.ui.kbd import (
    kbd,
)


def kbd_special_keys():
    """Special key examples"""
    return rx.box(
        kbd("Enter"),
        kbd("Esc"),
        kbd("Tab"),
        kbd("Space"),
        kbd("←"),
        kbd("→"),
        kbd("↑"),
        kbd("↓"),
        kbd("Delete"),
        kbd("Backspace"),
        class_name="flex flex-wrap gap-2 p-8",
    )

Complex Shortcuts

Demonstrates multi-key combinations for advanced shortcuts.

Screenshot:

Ctrl+Shift+S

Quit:

⌘+Q

Full Screen:

F11
import reflex as rx
from components.ui.kbd import (
    kbd,
    kbd_group,
)


def kbd_complex_shortcuts():
    """Complex multi-key shortcuts"""
    return rx.box(
        # Three modifier keys
        rx.box(
            rx.text("Screenshot:", class_name="text-sm font-medium mr-2"),
            kbd_group(
                kbd("Ctrl"),
                rx.el.span("+"),
                kbd("Shift"),
                rx.el.span("+"),
                kbd("S"),
            ),
            class_name="flex items-center mb-3",
        ),
        # Mac command
        rx.box(
            rx.text("Quit:", class_name="text-sm font-medium mr-2"),
            kbd_group(
                kbd("⌘"),
                rx.el.span("+"),
                kbd("Q"),
            ),
            class_name="flex items-center mb-3",
        ),
        # Function key
        rx.box(
            rx.text("Full Screen:", class_name="text-sm font-medium mr-2"),
            kbd("F11"),
            class_name="flex items-center",
        ),
        class_name="p-8",
    )

With Icons

Displays keyboard shortcuts paired with icons for clarity.

+K
import reflex as rx
from components.ui.kbd import (
    kbd,
    kbd_group,
)


def kbd_with_icons():
    """Kbd with icons"""
    return rx.box(
        kbd_group(
            kbd(
                rx.icon(tag="command", size=12),
            ),
            rx.el.span("+"),
            kbd("K"),
        ),
        kbd_group(
            kbd(
                rx.icon(tag="arrow-left", size=12),
            ),
            kbd(
                rx.icon(tag="arrow-right", size=12),
            ),
        ),
        class_name="flex flex-col items-center gap-4 p-8",
    )