Kbd Component

ℹ️

The Kbd component is a React component designed to represent keyboard input in a flexible and customizable manner. It supports variants for size and rounded corners, allowing for easy customization of the keyboard appearance.

Example Preview

Kbd Example

Usage

import { Kbd } from "@/@core";
 
// Render Kbd component with default or customized props
const MyKbdComponent = () => {
  return (
    <Kbd size="default" rounded="default">
      Ctrl + C
    </Kbd>
  );
};
 
export default MyKbdComponent;

Props

Prop name	Type	Default value	Required	Description
`size`	`'xSmall'`, `'small'`	`'default'`	No	Size variant for the keyboard.
`rounded`	`'none'`, `'default'`	`'default'`	No	Rounded variant for the keyboard.
`className`	`string`	-	No	Additional CSS class names for styling.
`children`	`ReactNode`	-	Yes	Content to display within the keyboard component.

ℹ️

Note: The Kbd component is forward-ref enabled to allow passing a ref to the underlying div element.

Example

Here is an example of using the Kbd component with default or customized props:

<Kbd size="default" rounded="default">
  Ctrl + C
</Kbd>

This will render a keyboard input component with default size and rounded corners. Customize the size, rounded variant, and content as needed.

ℹ️

Note: The Kbd component is a React component designed to represent keyboard input, making it easy to showcase key combinations or shortcuts in your application. It provides customization options for size and styling. This component is inspired by the DaisyUI (opens in a new tab) framework's design for keyboard input. Check it out for more awesome components.

Indicator Loading