Components
Loading preview...
Displays keyboard input or shortcut keys with customizable styles and sizes.
npx shadcn@latest add https://21st.dev/r/sean0205/kbd-1import { Kbd } from '@/components/ui/kbd-1';
import { ArrowDown, ArrowUp, Command } from 'lucide-react';
export default function ButtonDemo() {
return (
<div className="flex flex-col items-center gap-4">
<div className="flex items-center gap-4">
<Kbd size="xs">
<ArrowUp />
</Kbd>
<Kbd size="xs">
<ArrowDown />
</Kbd>
<Kbd size="xs">space</Kbd>
<Kbd size="xs">
<Command /> +K
</Kbd>
</div>
<div className="flex items-center gap-4">
<Kbd size="sm">
<ArrowUp />
</Kbd>
<Kbd size="sm">
<ArrowDown />
</Kbd>
<Kbd size="sm">space</Kbd>
<Kbd size="sm">
<Command /> +K
</Kbd>
</div>
<div className="flex items-center gap-4">
<Kbd>
<ArrowUp />
</Kbd>
<Kbd>
<ArrowDown />
</Kbd>
<Kbd>space</Kbd>
<Kbd>
<Command /> +K
</Kbd>
</div>
</div>
);
}