Keyboard Demo 1

nyxui/keyboard-demo1

FreeExample

Example showing a interactive keyboard.

Live preview

live · rendered by the registry

Rendered by shadcn/ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://nyxui.com/r/keyboard-demo1.json

Source

registry/example/keyboard-demo1.tsxnyxui.com/r/keyboard-demo1.json

1import React from "react";
2import InteractiveKeyboard from "../ui/keyboard";
3 
4export default function KeyboardDemo1() {
5  return (
6    <div className="w-full max-w-[300px] 2xl:max-w-[400px] md:max-w-fullhost scale-30 sm:scale-65 md:scale-80 lg:scale-75 2xl:scale-100">
7      <InteractiveKeyboard theme="neon" />
8    </div>
9  );
10}

What it pulls in

Other registry items

https://nyxui.com/r/keyboard.json

Files it writes

registry/example/keyboard-demo1.tsx

More from shadcn/ui

All 68 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
3D Layered Card Demo3d-layered-card-demo	shadcn/ui	Examples	Free	no deps
Animated Code Block Demoanimated-code-block-demo	shadcn/ui	Examples	Free	no deps
Animated Grainy Background Demoanimated-grainy-bg-demo	shadcn/ui	Examples	Free	no deps
Animated Text Demoanimated-text-demo	shadcn/ui	Examples	Free	no deps
Apple Glass Effect Demoapple-glass-effect-demo	shadcn/ui	Examples	Free	no deps
Bubble Background Demobubble-background-demo	shadcn/ui	Examples	Free	no deps
Custom Cursor Democustom-cursor-demo	shadcn/ui	Examples	Free	no deps
Cyberpunk Card Democyberpunk-card-demo	shadcn/ui	Examples	Free	no deps