Styled keyboard key representations for displaying keyboard shortcuts, hotkeys, and command references. Perfect for documentation, tutorials, and UI hints with realistic key styling and multiple size options.
The KBD component is used to display keyboard shortcuts and command references.
Keyboard indicators are available in four sizes: kbd-xs, kbd-sm,
kbd-md (default), and kbd-lg.
KBD components can be easily integrated into text to provide inline instructions or hints.
Press
Fto pay respects.
You can combine multiple KBD components with simple text separators to show multi-key shortcuts.
KBD components work perfectly with special characters and symbols for modifier keys.
By combining flex layouts and KBD components, you can create realistic keyboard layouts.
%div
.flex.justify-center.gap-1.my-1.w-full
= daisy_kbd do
tab
= daisy_kbd do
q
= daisy_kbd do
w
= daisy_kbd do
e
= daisy_kbd do
r
= daisy_kbd do
t
= daisy_kbd do
y
= daisy_kbd do
u
= daisy_kbd do
i
= daisy_kbd do
o
= daisy_kbd do
p
= daisy_kbd do
\[
= daisy_kbd do
\]
= daisy_kbd do
\\
.flex.justify-center.gap-1.my-1.w-full
= daisy_kbd do
caps lock
= daisy_kbd do
a
= daisy_kbd do
s
= daisy_kbd do
d
= daisy_kbd do
f
= daisy_kbd do
g
= daisy_kbd do
h
= daisy_kbd do
j
= daisy_kbd do
k
= daisy_kbd do
l
= daisy_kbd do
\:
= daisy_kbd do
'
= daisy_kbd do
return
.flex.justify-center.gap-1.my-1.w-full
= daisy_kbd do
shift
= daisy_kbd do
z
= daisy_kbd do
x
= daisy_kbd do
c
= daisy_kbd do
v
= daisy_kbd do
b
= daisy_kbd do
n
= daisy_kbd do
m
= daisy_kbd do
,
= daisy_kbd do
\.
= daisy_kbd do
\/
= daisy_kbd do
shift
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.