A keyboard key component for displaying keys and keyboard shortcuts, with a group wrapper for combinations.
import { Kbd, KbdGroup } from "@/components/ui/kbd"; export default function KbdDemo() { return ( <div className="flex flex-col items-center gap-6"> <div className="flex items-center gap-2"> <Kbd>Esc</Kbd> <Kbd>Tab</Kbd> <Kbd>Enter</Kbd> </div> <KbdGroup> <Kbd>Ctrl</Kbd> <span className="text-muted-foreground text-xs">+</span> <Kbd>K</Kbd> </KbdGroup> </div> ); }
Part of Cnippet — browse the full library on 21st.dev.