⌘ ⇧ ⌥ ⌃ Ctrl + B
<script lang="ts">
import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>
<div class="flex flex-col items-center gap-4">
<Kbd.Group>
<Kbd.Root>⌘</Kbd.Root>
<Kbd.Root>⇧</Kbd.Root>
<Kbd.Root>⌥</Kbd.Root>
<Kbd.Root>⌃</Kbd.Root>
</Kbd.Group>
<Kbd.Group>
<Kbd.Root>Ctrl</Kbd.Root>
<span>+</span>
<Kbd.Root>B</Kbd.Root>
</Kbd.Group>
</div>Installation
pnpm dlx shadcn-svelte@latest add kbdCopy and paste the following code into your project.
import Root from './kbd.svelte';
import Group from './kbd-group.svelte';
export {
Root,
Group,
//
Root as Kbd,
Group as KbdGroup
};
<script lang="ts">
import { cn, type WithElementRef } from '$UTILS$.js';
import type { HTMLAttributes } from 'svelte/elements';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
</script>
<kbd
bind:this={ref}
data-slot="kbd-group"
class={cn('gap-1 inline-flex items-center text-zinc-500', className)}
{...restProps}
>
{@render children?.()}
</kbd>
<script lang="ts">
import { cn, type WithElementRef } from '$UTILS$.js';
import type { HTMLAttributes } from 'svelte/elements';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
</script>
<kbd
bind:this={ref}
data-slot="kbd"
class={cn(
"border border-zinc-800 bg-zinc-950 text-zinc-300 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 in-data-[slot=input-group]:bg-background h-5.5 w-fit min-w-5.5 gap-1 rounded-none px-1.5 font-mono text-[0.625rem] font-semibold tracking-widest uppercase [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
className
)}
{...restProps}
>
{@render children?.()}
</kbd>
Usage
<script lang="ts">
import * as Kbd from '$lib/components/ui/kbd/index.js';
</script><Kbd.Root>B</Kbd.Root>Examples
Group
Use the Kbd.Group component to group keyboard keys together.
Use Ctrl + B Ctrl + K to open the command palette
<script lang="ts">
import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>
<div class="flex flex-col items-center gap-4">
<p class="text-muted-foreground text-sm">
Use
<Kbd.Group>
<Kbd.Root>Ctrl + B</Kbd.Root>
<Kbd.Root>Ctrl + K</Kbd.Root>
</Kbd.Group>
to open the command palette
</p>
</div>Button
Use the Kbd.Root component inside a Button component to display a keyboard key inside a button.
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>
<div class="flex flex-wrap items-center gap-4">
<Button variant="outline" size="sm" class="pe-2">
Accept <Kbd.Root>⏎</Kbd.Root>
</Button>
<Button variant="outline" size="sm" class="pe-2">
Cancel <Kbd.Root>Esc</Kbd.Root>
</Button>
</div>Tooltip
You can use the Kbd.Root component inside a Tooltip component to display a tooltip with a keyboard key.
<script lang="ts">
import * as ButtonGroup from "$lib/components/ui/button-group/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import * as Kbd from "$lib/components/ui/kbd/index.js";
import * as Tooltip from "$lib/components/ui/tooltip/index.js";
</script>
<div class="flex flex-wrap gap-4">
<ButtonGroup.Root>
<Tooltip.Root>
<Tooltip.Trigger>
{#snippet child({ props })}
<Button size="sm" variant="outline" {...props}>Save</Button>
{/snippet}
</Tooltip.Trigger>
<Tooltip.Content>
<div class="flex items-center gap-2">
Save Changes <Kbd.Root>S</Kbd.Root>
</div>
</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger>
{#snippet child({ props })}
<Button size="sm" variant="outline" {...props}>Print</Button>
{/snippet}
</Tooltip.Trigger>
<Tooltip.Content>
<div class="flex items-center gap-2">
Print Document
<Kbd.Group>
<Kbd.Root>Ctrl</Kbd.Root>
<Kbd.Root>P</Kbd.Root>
</Kbd.Group>
</div>
</Tooltip.Content>
</Tooltip.Root>
</ButtonGroup.Root>
</div>Input Group
You can use the Kbd.Root component inside a InputGroup.Addon component to display a keyboard key inside an input group.
⌘ K
<script lang="ts">
import * as Kbd from "$lib/components/ui/kbd/index.js";
import * as InputGroup from "$lib/components/ui/input-group/index.js";
import SearchIcon from "@lucide/svelte/icons/search";
</script>
<div class="flex w-full max-w-xs flex-col gap-6">
<InputGroup.Root>
<InputGroup.Input placeholder="Search..." />
<InputGroup.Addon>
<SearchIcon />
</InputGroup.Addon>
<InputGroup.Addon align="inline-end">
<Kbd.Root>⌘</Kbd.Root>
<Kbd.Root>K</Kbd.Root>
</InputGroup.Addon>
</InputGroup.Root>
</div>