Kbd

1import { Kbd, KbdGroup } from "@/components/ui/kbd"23export function Example() {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      <Kbd>Ctrl+B</Kbd>13    </div>14  )15}

1import { Kbd, KbdGroup } from "@/components/ui/kbd"23export function Example() {4  return (5    <div className="flex flex-wrap items-center justify-center gap-1 text-sm tracking-wide text-muted-foreground">6      <span>Use</span>7      <KbdGroup>8        <Kbd>Ctrl</Kbd>9        <Kbd>B</Kbd>10      </KbdGroup>11      <span>/</span>12      <KbdGroup>13        <Kbd>Ctrl</Kbd>14        <Kbd>K</Kbd>15      </KbdGroup>16      <span>to open the command palette</span>17    </div>18  )19}

1import { Button } from "@/components/ui/button"2import { Kbd } from "@/components/ui/kbd"34export function Example() {5  return (6    <Button variant="outline">7      Accept <Kbd>⏎</Kbd>8    </Button>9  )10}

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  TooltipProvider,8  TooltipTrigger,9} from "@/components/ui/tooltip"1011export function Example() {12  return (13    <TooltipProvider>14      <ButtonGroup>15        <Tooltip>16          <TooltipTrigger asChild>17            <Button variant="outline">Save</Button>18          </TooltipTrigger>19          <TooltipContent className="flex items-center gap-2">20            Save21            <KbdGroup>22              <Kbd>⌘</Kbd>23              <Kbd>S</Kbd>24            </KbdGroup>25          </TooltipContent>26        </Tooltip>27        <Tooltip>28          <TooltipTrigger asChild>29            <Button variant="outline">Print</Button>30          </TooltipTrigger>31          <TooltipContent className="flex items-center gap-2">32            Print33            <Kbd>⌘P</Kbd>34          </TooltipContent>35        </Tooltip>36      </ButtonGroup>37    </TooltipProvider>38  )39}