UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Kbd

kbdui
Boilerplate repo

Inline keyboard-key indicator — renders a single key or shortcut in monospace with a subtle bordered chip.

Installation

$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/kbd.json
Manifest:https://uipkge.dev/r/svelte/kbd.jsonInstalls to:src/lib/components/ui/kbd/

Examples

Loading interactive previews…

Props

NameType / ValuesDefaultRequired
childrenSnippet—optional
refHTMLElement | null—optional

Used by

Files installed (2)

  • src/lib/components/ui/kbd/Kbd.svelte0.7 kB
    <script lang="ts" module>
  import type { Snippet } from 'svelte'
  import type { HTMLAttributes } from 'svelte/elements'

  export interface KbdProps extends HTMLAttributes<HTMLElement> {
    children?: Snippet
    ref?: HTMLElement | null
  }
</script>

<script lang="ts">
  import { cn } from '$lib/utils'

  let { class: className, children, ref = $bindable(null), ...restProps }: KbdProps = $props()
</script>

<kbd
  bind:this={ref}
  data-uipkge=""
  data-slot="kbd"
  class={cn(
    'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded border px-1.5 font-mono text-xs font-medium select-none',
    className,
  )}
  {...restProps}
>
  {@render children?.()}
</kbd>
  • src/lib/components/ui/kbd/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/svelte/kbd.json