ComponentsCards
Typing Keys
A compact keyboard drawn in CSS whose keys sink and fill with water blue as you type on your own keyboard.
"use client";
import { TypingKeys } from "@/components/miyuki-ui/typing-keys";
export default function TypingKeysDemo() {
return (
<div className="w-full max-w-[45rem]">
<TypingKeys />
<p className="mt-5 text-center text-sm text-muted-foreground">Type something.</p>
</div>
);
}Install
npx shadcn@latest add @miyuki-ui/typing-keysThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
TypingKeys
Prop
Type