Tailwind CSS and Alpine JS KBD
The KBD component is used to display user input, such as keyboard shortcuts, in a visually appealing format.
Frequently used keys
A KBD component with frequently used keys.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<!-- Tab -->
<kbd class="">Tab</kbd>
<!-- Shift -->
<kbd class="">Shift</kbd>
<!-- space -->
<kbd class="">space</kbd>
<!-- Ctrl -->
<kbd class="">Ctrl</kbd>
<!-- command -->
<kbd class="">command</kbd>
<!-- alt -->
<kbd class="">alt</kbd>
<!-- option -->
<kbd class="">option</kbd>
<!-- Enter -->
<kbd class="">Enter</kbd>
<!-- Backspace -->
<kbd class="">Backspace</kbd>
<!-- Esc -->
<kbd class="">Esc</kbd>
<!-- Delete -->
<kbd class="">Delete</kbd>
<!-- Up -->
<kbd class="">Up</kbd>
<!-- Down -->
<kbd class="">Down</kbd>
<!-- Left -->
<kbd class="">Left</kbd>
<!-- Right -->
<kbd class="">Right</kbd>
<!-- Caps Lock -->
<kbd class="">Caps Lock</kbd>
<!-- Tab -->
<kbd class="">Tab</kbd>
<!-- Shift -->
<kbd class="">Shift</kbd>
<!-- space -->
<kbd class="">space</kbd>
<!-- Ctrl -->
<kbd class="">Ctrl</kbd>
<!-- command -->
<kbd class="">command</kbd>
<!-- alt -->
<kbd class="">alt</kbd>
<!-- option -->
<kbd class="">option</kbd>
<!-- Enter -->
<kbd class="">Enter</kbd>
<!-- Backspace -->
<kbd class="">Backspace</kbd>
<!-- Esc -->
<kbd class="">Esc</kbd>
<!-- Delete -->
<kbd class="">Delete</kbd>
<!-- Up -->
<kbd class="">Up</kbd>
<!-- Down -->
<kbd class="">Down</kbd>
<!-- Left -->
<kbd class="">Left</kbd>
<!-- Right -->
<kbd class="">Right</kbd>
<!-- Caps Lock -->
<kbd class="">Caps Lock</kbd>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Keys with icon
A KBD component with icons. This component incorporates icons sourced from Bootstrap Icons.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<!-- command -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3M6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5zm4 1v4H6V6zm1-1V3.5A1.5 1.5 0 1 1 12.5 5zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11z"/>
</svg>
</kbd>
<!-- shift -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="M7.27 2.047a1 1 0 0 1 1.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H11.5v3a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-3H1.654C.78 10.5.326 9.455.924 8.816L7.27 2.047zM14.346 9.5 8 2.731 1.654 9.5H4.5a1 1 0 0 1 1 1v3h5v-3a1 1 0 0 1 1-1z"/>
</svg>
</kbd>
<!-- option -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="M1 2.5a.5.5 0 0 1 .5-.5h3.797a.5.5 0 0 1 .439.26L11 13h3.5a.5.5 0 0 1 0 1h-3.797a.5.5 0 0 1-.439-.26L5 3H1.5a.5.5 0 0 1-.5-.5m10 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5"/>
</svg>
</kbd>
<!-- control -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>
</kbd>
<!-- tab -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path fill-rule="evenodd" d="M3 8a.5.5 0 0 1 .5-.5h6.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H3.5A.5.5 0 0 1 3 8"/>
<path fill-rule="evenodd" d="M12.5 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5"/>
</svg>
</kbd>
<!-- up -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
</svg>
</kbd>
<!-- down -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
</svg>
</kbd>
<!-- left -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
</svg>
</kbd>
<!-- right -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
</svg>
</kbd>
<!-- command -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3M6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5zm4 1v4H6V6zm1-1V3.5A1.5 1.5 0 1 1 12.5 5zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11z"/>
</svg>
</kbd>
<!-- shift -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="M7.27 2.047a1 1 0 0 1 1.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H11.5v3a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-3H1.654C.78 10.5.326 9.455.924 8.816L7.27 2.047zM14.346 9.5 8 2.731 1.654 9.5H4.5a1 1 0 0 1 1 1v3h5v-3a1 1 0 0 1 1-1z"/>
</svg>
</kbd>
<!-- option -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="M1 2.5a.5.5 0 0 1 .5-.5h3.797a.5.5 0 0 1 .439.26L11 13h3.5a.5.5 0 0 1 0 1h-3.797a.5.5 0 0 1-.439-.26L5 3H1.5a.5.5 0 0 1-.5-.5m10 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5"/>
</svg>
</kbd>
<!-- control -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>
</kbd>
<!-- tab -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path fill-rule="evenodd" d="M3 8a.5.5 0 0 1 .5-.5h6.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H3.5A.5.5 0 0 1 3 8"/>
<path fill-rule="evenodd" d="M12.5 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5"/>
</svg>
</kbd>
<!-- up -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
</svg>
</kbd>
<!-- down -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
</svg>
</kbd>
<!-- left -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
</svg>
</kbd>
<!-- right -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
</svg>
</kbd>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
KBD within text
Using the KBD component within a text.
To Tab or to Space , that's the question!
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<p class="">To <kbd class="">Tab</kbd> or to <kbd class="">Space</kbd> that's the question! </p>
<p class="">To <kbd class="">Tab</kbd> or to <kbd class="">Space</kbd> that's the question! </p>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Alphabet keys
A KBD component with alphabet keys.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<!-- A -->
<kbd class="">A</kbd>
<!-- B -->
<kbd class="">B</kbd>
<!-- C -->
<kbd class="">C</kbd>
<!-- D -->
<kbd class="">D</kbd>
<!-- E -->
<kbd class="">E</kbd>
<!-- F -->
<kbd class="">F</kbd>
<!-- G -->
<kbd class="">G</kbd>
<!-- H -->
<kbd class="">H</kbd>
<!-- I -->
<kbd class="">I</kbd>
<!-- J -->
<kbd class="">J</kbd>
<!-- K -->
<kbd class="">K</kbd>
<!-- L -->
<kbd class="">L</kbd>
<!-- M -->
<kbd class="">M</kbd>
<!-- N -->
<kbd class="">N</kbd>
<!-- O -->
<kbd class="">O</kbd>
<!-- P -->
<kbd class="">P</kbd>
<!-- Q -->
<kbd class="">Q</kbd>
<!-- R -->
<kbd class="">R</kbd>
<!-- S -->
<kbd class="">S</kbd>
<!-- T -->
<kbd class="">T</kbd>
<!-- U -->
<kbd class="">U</kbd>
<!-- V -->
<kbd class="">V</kbd>
<!-- W -->
<kbd class="">W</kbd>
<!-- X -->
<kbd class="">X</kbd>
<!-- Y -->
<kbd class="">Y</kbd>
<!-- Z -->
<kbd class="">Z</kbd>
<!-- A -->
<kbd class="">A</kbd>
<!-- B -->
<kbd class="">B</kbd>
<!-- C -->
<kbd class="">C</kbd>
<!-- D -->
<kbd class="">D</kbd>
<!-- E -->
<kbd class="">E</kbd>
<!-- F -->
<kbd class="">F</kbd>
<!-- G -->
<kbd class="">G</kbd>
<!-- H -->
<kbd class="">H</kbd>
<!-- I -->
<kbd class="">I</kbd>
<!-- J -->
<kbd class="">J</kbd>
<!-- K -->
<kbd class="">K</kbd>
<!-- L -->
<kbd class="">L</kbd>
<!-- M -->
<kbd class="">M</kbd>
<!-- N -->
<kbd class="">N</kbd>
<!-- O -->
<kbd class="">O</kbd>
<!-- P -->
<kbd class="">P</kbd>
<!-- Q -->
<kbd class="">Q</kbd>
<!-- R -->
<kbd class="">R</kbd>
<!-- S -->
<kbd class="">S</kbd>
<!-- T -->
<kbd class="">T</kbd>
<!-- U -->
<kbd class="">U</kbd>
<!-- V -->
<kbd class="">V</kbd>
<!-- W -->
<kbd class="">W</kbd>
<!-- X -->
<kbd class="">X</kbd>
<!-- Y -->
<kbd class="">Y</kbd>
<!-- Z -->
<kbd class="">Z</kbd>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Number keys
A KBD component with numerical keys.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<!-- 1 -->
<kbd class="">1</kbd>
<!-- 2 -->
<kbd class="">2</kbd>
<!-- 3 -->
<kbd class="">3</kbd>
<!-- 4 -->
<kbd class="">4</kbd>
<!-- 5 -->
<kbd class="">5</kbd>
<!-- 6 -->
<kbd class="">6</kbd>
<!-- 7 -->
<kbd class="">7</kbd>
<!-- 8 -->
<kbd class="">8</kbd>
<!-- 9 -->
<kbd class="">9</kbd>
<!-- 0 -->
<kbd class="">0</kbd>
<!-- 1 -->
<kbd class="">1</kbd>
<!-- 2 -->
<kbd class="">2</kbd>
<!-- 3 -->
<kbd class="">3</kbd>
<!-- 4 -->
<kbd class="">4</kbd>
<!-- 5 -->
<kbd class="">5</kbd>
<!-- 6 -->
<kbd class="">6</kbd>
<!-- 7 -->
<kbd class="">7</kbd>
<!-- 8 -->
<kbd class="">8</kbd>
<!-- 9 -->
<kbd class="">9</kbd>
<!-- 0 -->
<kbd class="">0</kbd>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Function keys
A KBD component with functional keys.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<!-- F1 -->
<kbd class="">F1</kbd>
<!-- F2 -->
<kbd class="">F2</kbd>
<!-- F3 -->
<kbd class="">F3</kbd>
<!-- F4 -->
<kbd class="">F4</kbd>
<!-- F5 -->
<kbd class="">F5</kbd>
<!-- F6 -->
<kbd class="">F6</kbd>
<!-- F7 -->
<kbd class="">F7</kbd>
<!-- F8 -->
<kbd class="">F8</kbd>
<!-- F10 -->
<kbd class="">F10</kbd>
<!-- F11 -->
<kbd class="">F11</kbd>
<!-- F12 -->
<kbd class="">F12</kbd>
<!-- F1 -->
<kbd class="">F1</kbd>
<!-- F2 -->
<kbd class="">F2</kbd>
<!-- F3 -->
<kbd class="">F3</kbd>
<!-- F4 -->
<kbd class="">F4</kbd>
<!-- F5 -->
<kbd class="">F5</kbd>
<!-- F6 -->
<kbd class="">F6</kbd>
<!-- F7 -->
<kbd class="">F7</kbd>
<!-- F8 -->
<kbd class="">F8</kbd>
<!-- F10 -->
<kbd class="">F10</kbd>
<!-- F11 -->
<kbd class="">F11</kbd>
<!-- F12 -->
<kbd class="">F12</kbd>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}