Used to display textual user input from keyboard.
1import { Kbd, KbdGroup } from "@/components/ui/kbd";23export default function Preview() {4 return (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/solidnpm install @sprawlify/primitives @sprawlify/solidyarn add @sprawlify/primitives @sprawlify/solidbun add @sprawlify/primitives @sprawlify/solid
Add the following files to your project:
1import { cn } from "@/lib/utils";2import { sprawlify } from "@sprawlify/solid";3import { splitProps, type ComponentProps } from "solid-js";45function Kbd(props: ComponentProps<typeof sprawlify.kbd>) {6 const [local, others] = splitProps(props, ["class"]);78 return (9 <sprawlify.kbd10 data-scope="kbd"11 data-part="root"12 data-slot="kbd"13 class={cn(14 "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",15 local.class,16 )}17 {...others}18 />19 );20}2122function KbdGroup(props: ComponentProps<typeof sprawlify.kbd>) {23 const [local, others] = splitProps(props, ["class"]);24 return (25 <sprawlify.kbd26 data-scope="kbd"27 data-part="group"28 data-slot="kbd-group"29 class={cn("gap-1 inline-flex items-center", local.class)}30 {...others}31 />32 );33}3435export { Kbd, KbdGroup };36Update 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.
1import { Button } from "@/components/ui/button";2import { Kbd } from "@/components/ui/kbd";34export default function Preview() {Group
Use the KbdGroup component to group keyboard keys together.
1import { Kbd, KbdGroup } from "@/components/ui/kbd";23export default function Preview() {4 return (Input Group
You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.
1import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";2import { Kbd } from "@/components/ui/kbd";3import { SearchIcon } from "lucide-solid";4Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.