Kbd
Used to display textual user input from keyboard.
Loading preview…
1<script lang="ts">
2 import * as Kbd from './index.js';
3</script>
4
5<div class="flex flex-col items-center gap-4">
6 <Kbd.Group>
7 <Kbd.Root>⌘</Kbd.Root>
8 <Kbd.Root>⇧</Kbd.Root>
9 <Kbd.Root>⌥</Kbd.Root>
10 <Kbd.Root>⌃</Kbd.Root>
11 </Kbd.Group>
12 <Kbd.Group>
13 <Kbd.Root>Ctrl</Kbd.Root>
14 <span>+</span>
15 <Kbd.Root>B</Kbd.Root>
16 </Kbd.Group>
17</div>
18Installation
1. Copy these files into your project
- ~/components/kbd/index.ts
- ~/components/kbd/kbd.svelte
- ~/components/kbd/kbd-group.svelte
Usage
Use kbd to show keyboard shortcuts. Compose keys with Kbd.Group and nest Kbd.Root for each key.
1<script lang="ts">
2 import * as Kbd from '~/components/kbd';
3</script>
4
5<Kbd.Group>
6 <Kbd.Root>Ctrl</Kbd.Root>
7 <span>+</span>
8 <Kbd.Root>B</Kbd.Root>
9</Kbd.Group>