Kbd

Displays a keyboard key or shortcut.

Press ⌘ K to open search

<script lang="ts">
  import { Kbd } from "$lib/components/ui/kbd";
</script>
 
<div
  class="flex items-center gap-2 text-sm tracking-[-0.39px] text-(--text)/72"
>
  Press
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
  to open search
</div>

Installation

npx lily-svelte@latest add kbd

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the kbd source from the registry into `$lib/components/ui/kbd`.

Usage

<script lang="ts">
	import { Kbd } from '$lib/components/ui/kbd';
</script>
 
Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search

← Input OTP Label →