Skip to content
Components Blocks Showcase Filament Why Aura Pricing Docs Blog About
Login

Laravel Kbd Component

Free · MIT

A keyboard key display component for showing keyboard shortcuts and key combinations.

A Kbd built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::kbd>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::kbd>Ctrl</x-aura::kbd>

See the full API, props and live examples in the Kbd documentation.

Overview

The <x-aura::kbd> component renders an inline keyboard key indicator styled to resemble a physical key. Use it to display keyboard shortcuts, hotkeys, or key combinations in documentation, tooltips, or UI hints.

Props

Prop Type Default Description
size string 'md' Key size: sm, md, lg.

See more examples and every variant in the Kbd documentation.

Laravel-native
No JavaScript framework. Pure Blade, Livewire & Alpine.
Dark mode & themeable
Tailwind 4 CSS variables and a visual Theme Studio.
Accessible
WCAG 2.1 AA-minded, keyboard and ARIA support.

Related components

Popover
A floating content panel that appears on click or hover, supporting multiple positions and glass morphism styling.
Slider
Range slider input for selecting numeric values within a defined range, with optional value display, color variants, and prefix/suffix labels.
Date Picker
Calendar-based date selection input with min/max constraints, time selector, locale support, and customizable format.
Context Menu
A right-click context menu with viewport-aware positioning, powered by Alpine.js.
Field
A form field wrapper that provides a label, hint text, error message, and required indicator around any input.
Heading
Semantic heading component with automatic sizing based on heading level.
Browse all components