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/reactnpm install @sprawlify/primitives @sprawlify/reactyarn add @sprawlify/primitives @sprawlify/reactbun add @sprawlify/primitives @sprawlify/react
Add the following files to your project:
1"use client";23import { cn } from "@/lib/utils";4import { sprawlify } from "@sprawlify/react";56function Kbd({ className, ...props }: React.ComponentProps<typeof sprawlify.kbd>) {7 return (8 <sprawlify.kbd9 data-scope="kbd"10 data-part="root"11 data-slot="kbd"12 className={cn(13 "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",14 className,15 )}16 {...props}17 />18 );19}2021function KbdGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.kbd>) {22 return (23 <sprawlify.kbd24 data-scope="kbd"25 data-part="group"26 data-slot="kbd-group"27 className={cn("gap-1 inline-flex items-center", className)}28 {...props}29 />30 );31}3233export { Kbd, KbdGroup };34Update 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-react";4Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.