• Kbd - The Keyboard key component.

import { Kbd } from "@dreamy-ui/react/rsc";

You can press action key and i to toggle the color mode.

<Kbd>^i</Kbd>

The Kbd component comes in three sizes: small, medium (default), and large.

<Kbd size="sm">Esc</Kbd>
<Kbd size="md">Enter</Kbd>
<Kbd size="lg">Space</Kbd>

You can utilize useActionKey hook to get the platform specific action key. Returns "⌘" for MacOS and "Ctrl" for other platforms.

import { useActionKey } from "@dreamy-ui/react";
 
const actionKey = useActionKey();
 
<Kbd>{actionKey} + K</Kbd>