⌘⇧⌥⌃Ctrl+B
import { Kbd, KbdGroup } from "@/components/ui/kbd"
export function KbdDemo() {
return (
<div className="flex flex-col items-center gap-4">Installation
pnpm slabui add kbd
Usage
import { Kbd } from "@/components/ui/kbd"<Kbd>Ctrl</Kbd>Composition
Use the following composition to build Kbd and KbdGroup:
Kbd
KbdGroup
├── Kbd
└── KbdGroup
Use the KbdGroup component to group keyboard keys together.
Use Ctrl + BCtrl + K to open the command palette
import { Kbd, KbdGroup } from "@/components/ui/kbd"
export function KbdGroupExample() {
return (
<div className="flex flex-col items-center gap-4">Button
Use the Kbd component inside a Button component to display a keyboard key inside a button.
import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"
export function KbdButton() {
return (Tooltip
You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd, KbdGroup } from "@/components/ui/kbd"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
Input Group
You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.
⌘K
import { SearchIcon } from "lucide-react"
import {
InputGroup,
InputGroupAddon,API Reference
Kbd
Use the Kbd component to display a keyboard key.
| Prop | Type | Default |
|---|---|---|
className | string | `` |
<Kbd>Ctrl</Kbd>KbdGroup
Use the KbdGroup component to group Kbd components together.
| Prop | Type | Default |
|---|---|---|
className | string | `` |
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>B</Kbd>
</KbdGroup>