Kbd

Keyboard key component for displaying shortcuts and hotkeys.

Preview

ShiftK

npx drivn add kbd

1 import { Kbd } from "@/components/ui/kbd"
2 
3 export default function Page() {
4   return (
5     <Kbd>Shift</Kbd>
6   )
7 }

ShiftShift

Press K to open the search dialog.

CVCtrlShiftPB

Prop	Type	Default	Description
`variant`	"default" \| "outline"	"default"	Visual style of the key
`className`	string	—	Additional CSS classes to apply
`children`	ReactNode	—	Key label displayed inside the element

Prop	Type	Default	Description
`className`	string	—	Additional CSS classes to apply
`children`	ReactNode	—	Kbd elements to display as a group

1	import { Kbd } from "@/components/ui/kbd"
2
3	export default function Page() {
4	return (
5	<Kbd>Shift</Kbd>
6	)
7	}