Kbd

1import { Search01Icon } from '@hugeicons/core-free-icons';
2import { HugeiconsIcon } from '@hugeicons/react';
3import { Kbd } from '@/components/ui/kbd';
4import { Flex } from '@/components/ui/flex';
5
6export function Default() {
7  return (
8    <Flex
9      align="center"
10      justify="between"
11      gap="3"
12      className="border-border bg-card w-full max-w-sm rounded-lg border px-3 py-2"
13    >
14      <Flex align="center" gap="2" className="text-muted-foreground min-w-0">
15        <HugeiconsIcon icon={Search01Icon} className="size-4 shrink-0" size={16} />
16        <span className="truncate text-sm">Search projects and invoices</span>
17      </Flex>
18      <Kbd abbrTitle="Slash">/</Kbd>
19    </Flex>
20  );
21}

1import { Kbd, KbdGroup } from '@/components/ui/kbd';
2import { Flex } from '@/components/ui/flex';
3import { Stack } from '@/components/ui/stack';
4
5interface Row {
6  size: 'sm' | 'default' | 'lg';
7  place: string;
8  action: string;
9  keys: { key: string; title?: string }[];
10}
11
12const rows: Row[] = [
13  {
14    size: 'sm',
15    place: 'Menu item',
16    action: 'Toggle sidebar',
17    keys: [{ key: '⌘', title: 'Command' }, { key: 'B' }],
18  },
19  {
20    size: 'default',
21    place: 'Shortcut list',
22    action: 'Save draft',
23    keys: [{ key: '⌘', title: 'Command' }, { key: 'S' }],
24  },
25  {
26    size: 'lg',
27    place: 'Empty state',
28    action: 'Open the command palette',
29    keys: [{ key: '⌘', title: 'Command' }, { key: 'K' }],
30  },
31];
32
33export function Sizes() {
34  return (
35    <Stack gap="3" className="w-full max-w-md">
36      {rows.map((row) => (
37        <Flex
38          key={row.size}
39          align="center"
40          justify="between"
41          gap="4"
42          className="border-border bg-card rounded-xl border p-4"
43        >
44          <div className="min-w-0">
45            <p className="text-muted-foreground text-[11px] tracking-wide uppercase">{row.place}</p>
46            <p className="mt-1 truncate text-sm font-medium">{row.action}</p>
47          </div>
48          <KbdGroup>
49            {row.keys.map((entry) => (
50              <Kbd key={entry.key} size={row.size} abbrTitle={entry.title}>
51                {entry.key}
52              </Kbd>
53            ))}
54          </KbdGroup>
55        </Flex>
56      ))}
57    </Stack>
58  );
59}

1import { Kbd, KbdGroup } from '@/components/ui/kbd';
2import { Flex } from '@/components/ui/flex';
3import { Stack } from '@/components/ui/stack';
4
5export function Variants() {
6  return (
7    <Stack gap="3" className="w-full max-w-md">
8      <Flex align="center" justify="between" gap="4" className="bg-muted/50 rounded-lg px-3 py-2">
9        <span className="truncate text-sm">Open the command palette</span>
10        <KbdGroup>
11          <Kbd abbrTitle="Command">⌘</Kbd>
12          <Kbd>K</Kbd>
13        </KbdGroup>
14      </Flex>
15      <Flex
16        align="center"
17        justify="between"
18        gap="4"
19        className="border-border bg-card rounded-lg border px-3 py-2"
20      >
21        <span className="text-muted-foreground truncate text-sm">
22          Close without saving the draft
23        </span>
24        <Kbd variant="outline" abbrTitle="Escape">
25          Esc
26        </Kbd>
27      </Flex>
28    </Stack>
29  );
30}

1import { Kbd, KbdGroup } from '@/components/ui/kbd';
2import { Flex } from '@/components/ui/flex';
3import { Stack } from '@/components/ui/stack';
4
5interface Shortcut {
6  action: string;
7  keys: { key: string; title?: string }[];
8}
9
10const shortcuts: Shortcut[] = [
11  {
12    action: 'Open the command palette',
13    keys: [{ key: '⌘', title: 'Command' }, { key: 'K' }],
14  },
15  {
16    action: 'Jump to a file',
17    keys: [{ key: '⌘', title: 'Command' }, { key: 'P' }],
18  },
19  {
20    action: 'Comment on the selection',
21    keys: [{ key: '⌘', title: 'Command' }, { key: '⇧', title: 'Shift' }, { key: 'M' }],
22  },
23  {
24    action: 'Toggle the terminal',
25    keys: [{ key: 'Ctrl', title: 'Control' }, { key: '`' }],
26  },
27];
28
29export function WithGroup() {
30  return (
31    <Stack gap="4" className="border-border bg-card w-full max-w-md rounded-xl border p-4">
32      <p className="text-sm font-medium">Keyboard shortcuts</p>
33      <Stack gap="3">
34        {shortcuts.map((shortcut) => (
35          <Flex key={shortcut.action} align="center" justify="between" gap="4">
36            <span className="text-muted-foreground truncate text-sm">{shortcut.action}</span>
37            <KbdGroup>
38              {shortcut.keys.map((entry) => (
39                <Kbd key={entry.key} abbrTitle={entry.title}>
40                  {entry.key}
41                </Kbd>
42              ))}
43            </KbdGroup>
44          </Flex>
45        ))}
46      </Stack>
47    </Stack>
48  );
49}