Kbd

1
import { Kbd, KbdGroup } from "~/components/ui/kbd";
2

3
export default function KbdDemo() {
4
  return (
5
    <div class="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
}

1
import { Kbd, KbdGroup } from "~/components/ui/kbd";
2

3
export default function KbdGroupExample() {
4
  return (
5
    <div class="flex flex-col items-center gap-4">
6
      <p class="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
}

1
import { Button } from "~/components/ui/button";
2
import { Kbd } from "~/components/ui/kbd";
3

4
export default function KbdButton() {
5
  return (
6
    <Button variant="outline">
7
      Accept{" "}
8
      <Kbd class="translate-x-0.5" data-icon="inline-end">
9
        ⏎
10
      </Kbd>
11
    </Button>
12
  );
13
}

1
import { Button } from "~/components/ui/button";
2
import { ButtonGroup } from "~/components/ui/button-group";
3
import { Kbd, KbdGroup } from "~/components/ui/kbd";
4
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
5

6
export default function KbdTooltip() {
7
  return (
8
    <div class="flex flex-wrap gap-4">
9
      <ButtonGroup>
10
        <Tooltip>
11
          <TooltipTrigger as={Button} variant="outline">
12
            Save
13
          </TooltipTrigger>
14
          <TooltipContent>
15
            Save Changes <Kbd>S</Kbd>
16
          </TooltipContent>
17
        </Tooltip>
18
        <Tooltip>
19
          <TooltipTrigger as={Button} variant="outline">
20
            Print
21
          </TooltipTrigger>
22
          <TooltipContent>
23
            Print Document{" "}
24
            <KbdGroup>
25
              <Kbd>Ctrl</Kbd>
26
              <Kbd>P</Kbd>
27
            </KbdGroup>
28
          </TooltipContent>
29
        </Tooltip>
30
      </ButtonGroup>
31
    </div>
32
  );
33
}

1
import { SearchIcon } from "lucide-solid";
2
import { InputGroup, InputGroupAddon, InputGroupInput } from "~/components/ui/input-group";
3
import { Kbd } from "~/components/ui/kbd";
4

5
export default function KbdInputGroup() {
6
  return (
7
    <div class="flex w-full max-w-xs flex-col gap-6">
8
      <InputGroup>
9
        <InputGroupInput placeholder="Search..." />
10
        <InputGroupAddon>
11
          <SearchIcon />
12
        </InputGroupAddon>
13
        <InputGroupAddon align="inline-end">
14
          <Kbd>⌘</Kbd>
15
          <Kbd>K</Kbd>
16
        </InputGroupAddon>
17
      </InputGroup>
18
    </div>
19
  );
20
}