Kbd

Useful for showcasing keyboard shortcuts or other keyboard-based commands.

⌘ K

Installation

Copy-Paste the component code in a .tsx file.

import React from "react"
import { kbdTheme } from "@tailus/themer"

export interface KbdProps extends React.HTMLAttributes<HTMLElement>{}
    
export const Kbd = React.forwardRef<HTMLPreElement, KbdProps>(({
    children,
    className,
    ...props
}, ref) => {
    return (
        <kbd ref={ref} className={kbdTheme({className })} {...props}>
            {children}
        </kbd>
    )
})

Usage

Import the <Kbd/> and start building.

import { Kbd } from "@tailus-ui/typography";
const MyComponent = () => (
    <Kbd>Cmd</Kbd>
)