Kbd

⌘⇧⌥⌃Ctrl+B

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Kbd component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/components/button-group.css";
@import "@a3s-lab/ui/components/input-group.css";
@import "@a3s-lab/ui/components/kbd.css";
@import "@a3s-lab/ui/components/tooltip.css";
@import "@a3s-lab/ui/styles/a3s.css";

Kbd examples compose Button, Button Group, Input Group, and Tooltip styles.

Using CDN or bundler imports? See the Installation page.

Add your kbd HTML

Use <kbd class="kbd"> for a key label. Use an inline wrapper with utilities when grouping multiple keys.

<kbd class="kbd">⌘K</kbd>

Keyboard labels are direction-neutral. Surrounding spacing should use logical utilities when position matters.

Examples

Group

Use Ctrl+B Ctrl+K to open the command palette

Button

Input Group

⌘K

RTL

Keyboard labels are direction-neutral. Surrounding spacing should use logical utilities when position matters.

⌘⇧⌥⌃Ctrl+B

#Kbd

#Usage

Include CSS

Add your kbd HTML

#Examples

#Group

#Button

#Input Group

#RTL

Kbd

Usage

Examples

Group

Button

Input Group

RTL