Used to display textual user input from keyboard.
Installation
npx shadcn@latest add @caprice/kbdnpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { compose, cva, cx: cn,} = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };Copy and paste the following code into your project.
import { cn } from '@/lib/utils';/** * A keyboard key. * Renders a `<kbd>` element. * * Documentation: [Caprice UI Kbd](https://caprice-ui.com/docs/components/kbd) */export namespace Kbd { export type Props = React.ComponentProps<'kbd'>;}export function Kbd({ className, ...props }: Kbd.Props) { return ( <kbd className={cn( 'pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm bg-muted px-1 font-medium font-sans text-muted-foreground text-xs', "[&_svg:not([class*='size-'])]:size-3", 'in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10', className )} data-slot="kbd" {...props} /> );}/** * A group of keyboard keys. * Renders a `<kbd>` element. * * Documentation: [Caprice UI Kbd](https://caprice-ui.com/docs/components/kbd) */export namespace KbdGroup { export type Props = React.ComponentProps<'kbd'>;}export function KbdGroup({ className, ...props }: KbdGroup.Props) { return ( <kbd className={cn('inline-flex items-center gap-1', className)} data-slot="kbd-group" {...props} /> );}Update the import paths to match your project setup.
Usage
import { Kbd, KbdGroup } from "@/components/caprice-ui/kbd"import { Kbd, KbdGroup } from "@caprice-ui/react/kbd"