Kbd

Used to display textual user input from keyboard.

Basic

Ctrl ⌘K Ctrl + B

Modifier Keys

⌘ C

KbdGroup

Ctrl Shift P

Arrow Keys

↑ ↓ ← →

With Icons

With Icons and Text

Left Voice Enabled

InputGroup

Space

Tooltip

With samp

File

<script lang="ts">
  import { Example, ExampleWrapper } from '$registry/bases/base/components/example';
  import { InputGroup, InputGroupAddon, InputGroupInput } from '$registry/bases/base/ui/input-group';
  import { Kbd, KbdGroup } from '$registry/bases/base/ui/kbd';
  import { IconPlaceholder } from '$registry/bases/base/ui/icons';
  import { Button } from '$registry/bases/base/ui/button';
  import { Tooltip, TooltipContent, TooltipTrigger } from '$registry/bases/base/ui/tooltip';
</script>

{#snippet KbdBasic()}
  <Example title="Basic">
    <div class="flex items-center gap-2">
      <Kbd>Ctrl</Kbd>
      <Kbd>⌘K</Kbd>
      <Kbd>Ctrl + B</Kbd>
    </div>
  </Example>
{/snippet}

{#snippet KbdModifierKeys()}
  <Example title="Modifier Keys">
    <div class="flex items-center gap-2">
      <Kbd>⌘</Kbd>
      <Kbd>C</Kbd>
    </div>
  </Example>
{/snippet}

{#snippet KbdGroupExample()}
  <Example title="KbdGroup">
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <Kbd>Shift</Kbd>
      <Kbd>P</Kbd>
    </KbdGroup>
  </Example>
{/snippet}

{#snippet KbdArrowKeys()}
  <Example title="Arrow Keys">
    <div class="flex items-center gap-2">
      <Kbd>↑</Kbd>
      <Kbd>↓</Kbd>
      <Kbd>←</Kbd>
      <Kbd>→</Kbd>
    </div>
  </Example>
{/snippet}

{#snippet KbdWithIcons()}
  <Example title="With Icons">
    <KbdGroup>
      <Kbd>
        <IconPlaceholder
          lucide="CircleDashedIcon"
          tabler="IconCircleDashed"
          hugeicons="DashedLineCircleIcon"
          phosphor="CircleDashedIcon"
          remixicon="RiLoaderLine"
        />
      </Kbd>
      <Kbd>
        <IconPlaceholder
          lucide="ArrowLeftIcon"
          tabler="IconArrowLeft"
          hugeicons="ArrowLeft01Icon"
          phosphor="ArrowLeftIcon"
          remixicon="RiArrowLeftLine"
        />
      </Kbd>
      <Kbd>
        <IconPlaceholder
          lucide="ArrowRightIcon"
          tabler="IconArrowRight"
          hugeicons="ArrowRight01Icon"
          phosphor="ArrowRightIcon"
          remixicon="RiArrowRightLine"
        />
      </Kbd>
    </KbdGroup>
  </Example>
{/snippet}

{#snippet KbdWithIconsAndText()}
  <Example title="With Icons and Text">
    <KbdGroup>
      <Kbd>
        <IconPlaceholder
          lucide="ArrowLeftIcon"
          tabler="IconArrowLeft"
          hugeicons="ArrowLeft01Icon"
          phosphor="ArrowLeftIcon"
          remixicon="RiArrowLeftLine"
        />
        Left
      </Kbd>
      <Kbd>
        <IconPlaceholder
          lucide="CircleDashedIcon"
          tabler="IconCircleDashed"
          hugeicons="DashedLineCircleIcon"
          phosphor="CircleDashedIcon"
          remixicon="RiLoaderLine"
        />
        Voice Enabled
      </Kbd>
    </KbdGroup>
  </Example>
{/snippet}

{#snippet KbdInInputGroup()}
  <Example title="InputGroup">
    <InputGroup>
      <InputGroupInput />
      <InputGroupAddon>
        <Kbd>Space</Kbd>
      </InputGroupAddon>
    </InputGroup>
  </Example>
{/snippet}

{#snippet KbdInTooltip()}
  <Example title="Tooltip">
    <Tooltip>
      <TooltipTrigger>
        {#snippet render(props, _state, content)}<Button size="icon-sm" variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
        <IconPlaceholder lucide="SaveIcon" tabler="IconDeviceFloppy" hugeicons="FloppyDiskIcon" phosphor="FloppyDiskIcon" remixicon="RiSaveLine" />
      </TooltipTrigger>
      <TooltipContent class="pr-1.5">
        <div class="flex items-center gap-2">
          Save Changes <Kbd>S</Kbd>
        </div>
      </TooltipContent>
    </Tooltip>
  </Example>
{/snippet}

{#snippet KbdWithSamp()}
  <Example title="With samp">
    <Kbd>
      <samp>File</samp>
    </Kbd>
  </Example>
{/snippet}

<ExampleWrapper>
  {@render KbdBasic()}
  {@render KbdModifierKeys()}
  {@render KbdGroupExample()}
  {@render KbdArrowKeys()}
  {@render KbdWithIcons()}
  {@render KbdWithIconsAndText()}
  {@render KbdInInputGroup()}
  {@render KbdInTooltip()}
  {@render KbdWithSamp()}
</ExampleWrapper>

Installation

Install the dependencies

pnpm add cn class-variance-authority

Copy the component

Copy the following files into src/lib/components/ui/kbd.

src/lib/components/ui/kbd/Kbd.svelte

<script lang="ts">
  import type { KbdProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: KbdProps = $props();
</script>
<kbd data-slot="kbd" {...props} class={cn("bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none", classProp)}>
  {@render children?.()}
</kbd>

src/lib/components/ui/kbd/KbdGroup.svelte

<script lang="ts">
  import type { KbdGroupProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: KbdGroupProps = $props();
</script>
<kbd data-slot="kbd-group" {...props} class={cn('gap-1 inline-flex items-center', classProp)}>
  {@render children?.()}
</kbd>

src/lib/components/ui/kbd/types.ts

import type { HTMLAttributes } from 'svelte/elements';

export type KbdProps = HTMLAttributes<HTMLElement>;
export type KbdGroupProps = KbdProps;

src/lib/components/ui/kbd/index.ts

export { default as Kbd } from './Kbd.svelte';
export { default as KbdGroup } from './KbdGroup.svelte';
export type { KbdProps, KbdGroupProps } from './types.js';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import { Kbd, KbdGroup } from '$lib/components/ui/kbd';
</script>

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>