Kbd
Displays keyboard keys or shortcuts in a styled format.
class-variance-authority
āā§ā„āCtrl+B
1import { Kbd, KbdGroup } from '@/components/ui/kbd'
2
3export function KbdDemo() {
4 return (
5 <div className="flex flex-col items-center gap-4">
6 <KbdGroup>
7 <Kbd>ā</Kbd>
8 <Kbd>ā§</Kbd>
9 <Kbd>ā„</Kbd>
10 <Kbd>ā</Kbd>
11 </KbdGroup>
12 <KbdGroup>
13 <Kbd>Ctrl</Kbd>
14 <span>+</span>
15 <Kbd>B</Kbd>
16 </KbdGroup>
17 </div>
18 )
19}
20Installation
1
Install the following dependencies:
npx shadcn@latest add https://sbthemes.com/r/kbd.json
Examples
Group
Use Ctrl + BCtrl + K to open the command palette
1import { Kbd, KbdGroup } from '@/components/ui/kbd'
2
3export function KbdGroupExample() {
4 return (
5 <div className="flex flex-col items-center gap-4">
6 <p className="text-muted-foreground text-sm">
7 Use{' '}
8 <KbdGroup>
9 <Kbd>Ctrl + B</Kbd>
10 <Kbd>Ctrl + K</Kbd>
11 </KbdGroup>{' '}
12 to open the command palette
13 </p>
14 </div>
15 )
16}
17Size
Small:āKCtrlC
Medium:āKCtrlV
Large:āShiftAltDel
1import { Kbd, KbdGroup } from '@/components/ui/kbd'
2
3export function KbdDemo() {
4 return (
5 <div className="flex flex-col gap-4 p-6">
6 <div className="flex items-center gap-2">
7 <span className="w-16 text-sm">Small:</span>
8 <Kbd size="sm">ā</Kbd>
9 <Kbd size="sm">K</Kbd>
10 <KbdGroup>
11 <Kbd size="sm">Ctrl</Kbd>
12 <Kbd size="sm">C</Kbd>
13 </KbdGroup>
14 </div>
15
16 <div className="flex items-center gap-2">
17 <span className="w-16 text-sm">Medium:</span>
18 <Kbd size="md">ā</Kbd>
19 <Kbd size="md">K</Kbd>
20 <KbdGroup>
21 <Kbd size="md">Ctrl</Kbd>
22 <Kbd size="md">V</Kbd>
23 </KbdGroup>
24 </div>
25
26 <div className="flex items-center gap-2">
27 <span className="w-16 text-sm">Large:</span>
28 <Kbd size="lg">ā</Kbd>
29 <Kbd size="lg">Shift</Kbd>
30 <KbdGroup>
31 <Kbd size="lg">Alt</Kbd>
32 <Kbd size="lg">Del</Kbd>
33 </KbdGroup>
34 </div>
35 </div>
36 )
37}
38Variants
Default:āK
Ghost:āK
Outline:āK
Primary:āK
1import { Kbd } from '@/components/ui/kbd'
2
3export function KbdVariantDemo() {
4 return (
5 <div className="flex flex-col gap-4 p-6 text-sm">
6 <div className="flex items-center gap-2">
7 <span className="w-20">Default:</span>
8 <Kbd variant="default">ā</Kbd>
9 <Kbd variant="default">K</Kbd>
10 </div>
11
12 <div className="flex items-center gap-2">
13 <span className="w-20">Ghost:</span>
14 <Kbd variant="ghost">ā</Kbd>
15 <Kbd variant="ghost">K</Kbd>
16 </div>
17
18 <div className="flex items-center gap-2">
19 <span className="w-20">Outline:</span>
20 <Kbd variant="outline">ā</Kbd>
21 <Kbd variant="outline">K</Kbd>
22 </div>
23
24 <div className="flex items-center gap-2">
25 <span className="w-20">Primary:</span>
26 <Kbd variant="primary">ā</Kbd>
27 <Kbd variant="primary">K</Kbd>
28 </div>
29 </div>
30 )
31}
32Button
1import { Button } from '@/components/ui/button'
2import { Kbd } from '@/components/ui/kbd'
3
4export function KbdButton() {
5 return (
6 <div className="flex flex-wrap items-center gap-4">
7 <Button variant="outline">
8 Save <Kbd variant="primary">ā</Kbd>
9 </Button>
10 <Button variant="outline">
11 Cancel <Kbd variant="primary">Esc</Kbd>
12 </Button>
13 </div>
14 )
15}
16Tooltip
1import { Button } from '@/components/ui/button'
2import { ButtonGroup } from '@/components/ui/button-group'
3import { Kbd, KbdGroup } from '@/components/ui/kbd'
4import {
5 Tooltip,
6 TooltipContent,
7 TooltipTrigger,
8} from '@/components/ui/tooltip'
9
10export function KbdTooltip() {
11 return (
12 <div className="flex flex-wrap gap-4">
13 <ButtonGroup>
14 <Tooltip>
15 <TooltipTrigger asChild>
16 <Button size="sm" variant="outline">
17 Copy
18 </Button>
19 </TooltipTrigger>
20 <TooltipContent>
21 <div className="flex items-center gap-2">
22 Copy{' '}
23 <KbdGroup>
24 <Kbd>Ctrl</Kbd>
25
26 <Kbd>C</Kbd>
27 </KbdGroup>
28 </div>
29 </TooltipContent>
30 </Tooltip>
31 <Tooltip>
32 <TooltipTrigger asChild>
33 <Button size="sm" variant="outline">
34 Paste
35 </Button>
36 </TooltipTrigger>
37 <TooltipContent>
38 <div className="flex items-center gap-2">
39 Paste
40 <KbdGroup>
41 <Kbd>Ctrl</Kbd>
42 <Kbd>V</Kbd>
43 </KbdGroup>
44 </div>
45 </TooltipContent>
46 </Tooltip>
47 </ButtonGroup>
48 </div>
49 )
50}
51Input Group
āK
1import { SearchIcon } from 'lucide-react'
2
3import {
4 InputGroup,
5 InputGroupAddon,
6 InputGroupInput,
7} from '@/components/ui/input-group'
8import { Kbd } from '@/components/ui/kbd'
9
10export function KbdInputGroup() {
11 return (
12 <div className="flex w-full max-w-xs flex-col gap-6">
13 <InputGroup>
14 <InputGroupInput placeholder="Search..." />
15 <InputGroupAddon>
16 <SearchIcon />
17 </InputGroupAddon>
18 <InputGroupAddon align="inline-end">
19 <Kbd>ā</Kbd>
20 <Kbd>K</Kbd>
21 </InputGroupAddon>
22 </InputGroup>
23 </div>
24 )
25}
26API Reference
Kbd
| Prop | Type | Default |
|---|---|---|
| variant | default, ghost, outline, primary | default |
| size | sm, md, lg | md |
On This Page