Used to display textual user input from keyboard.
1<script lang="ts">
2import { Kbd, KbdGroup } from "@/components/ui/kbd"
3</script>
4
Installation
pnpm dlx sprawlify@latest add kbdnpx sprawlify@latest add kbdyarn sprawlify@latest add kbdbunx --bun sprawlify@latest add kbd
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/sveltenpm install @sprawlify/primitives @sprawlify/svelteyarn add @sprawlify/primitives @sprawlify/sveltebun add @sprawlify/primitives @sprawlify/svelte
Add the following files to your project:
1export { default as Kbd } from "./kbd.svelte";2export { default as KbdGroup } from "./kbd-group.svelte";31<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements";
5
6interface Props extends HTMLAttributes<HTMLElement>, PolymorphicProps<"div"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12 as="div"
13 data-scope="kbd"
14 data-part="group"
15 data-slot="kbd-group"
16 class={cn("gap-1 inline-flex items-center", className)}
17 {...rest}
18>
19 {@render children?.()}
20</Sprawlify>1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements";
5
6interface Props extends HTMLAttributes<HTMLElement>, PolymorphicProps<"kbd"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12 as="kbd"
13 data-scope="kbd"
14 data-part="root"
15 data-slot="kbd"
16 class={cn(
17 "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",
18 className
19 )}
20 {...rest}
21>
22 {@render children?.()}
23</Sprawlify>Update the import paths to match your project setup.
Usage
1import { Kbd, KbdGroup } from "@/components/ui/kbd"1<Kbd>Ctrl</Kbd>Examples
Button
Use the Kbd component inside a Button component to display a keyboard key inside a button.
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import { Kbd } from "@/components/ui/kbd"
4</script>
Group
Use the KbdGroup component to group keyboard keys together.
1<script lang="ts">
2import { Kbd, KbdGroup } from "@/components/ui/kbd"
3</script>
4
Input Group
You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.
1<script lang="ts">
2import {
3 InputGroup,
4 InputGroupAddon,
Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.