Same BEM classes and behavior as Astro, Svelte, and Vue.
Add this component
The command below includes <strong>Kbd</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
npm pnpm yarn bun
bashbash
npx rizzo-css add Kbd
bashbash
pnpm dlx rizzo-css add Kbd
bashbash
npx rizzo-css add Kbd
bashbash
bunx rizzo-css add Kbd
Live examples
React
Press Ctrl+K to open search.
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React
astroastro
---
import Kbd from '../components/astro/Kbd.astro';
---
<p>Press <Kbd>Ctrl</Kbd>+<Kbd>K</Kbd> to open search.</p>
htmlhtml
<!-- Rizzo CSS. No script needed. -->
<p>Press <kbd class="kbd">Ctrl</kbd>+<kbd class="kbd">K</kbd> to open search.</p>
sveltesvelte
<script>
import { Kbd } from '$lib/rizzo';
</script>
<p>Press <Kbd>Ctrl</Kbd>+<Kbd>K</Kbd> to open search.</p>
vuevue
<script setup>
import Kbd from '@/components/rizzo/Kbd.vue';
</script>
<template>
<p>Press <Kbd>Ctrl</Kbd>+<Kbd>K</Kbd> to open search.</p>
</template>
tsxtsx
import { Kbd } from './components/react';
<p>Press <Kbd>Ctrl</Kbd>+<Kbd>K</Kbd> to open search.</p>