diff --git a/.github/codeowners-coverage-baseline.txt b/.github/codeowners-coverage-baseline.txt
index 3b19ec26e909ba..1d3ee12af227dc 100644
--- a/.github/codeowners-coverage-baseline.txt
+++ b/.github/codeowners-coverage-baseline.txt
@@ -752,8 +752,6 @@ static/app/components/hook.spec.tsx
 static/app/components/hook.tsx
 static/app/components/hookOrDefault.spec.tsx
 static/app/components/hookOrDefault.tsx
-static/app/components/hotkeysLabel.spec.tsx
-static/app/components/hotkeysLabel.tsx
 static/app/components/hovercard.spec.tsx
 static/app/components/hovercard.tsx
 static/app/components/iconCircledNumber.tsx
diff --git a/static/app/components/alerts/pageBanner.stories.tsx b/static/app/components/alerts/pageBanner.stories.tsx
index 445eb0ab1ad42e..6c7d85bf55c492 100644
--- a/static/app/components/alerts/pageBanner.stories.tsx
+++ b/static/app/components/alerts/pageBanner.stories.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import replaysDeadRageBackground from 'sentry-images/spot/replay-dead-rage-changelog.svg';
 
 import {Button, LinkButton} from '@sentry/scraps/button';
+import {InlineCode} from '@sentry/scraps/code';
 import {ExternalLink} from '@sentry/scraps/link';
 
 import {PageBanner} from 'sentry/components/alerts/pageBanner';
@@ -42,7 +43,7 @@ export default Storybook.story('PageBanner', story => {
       <Fragment>
         <p>
           This example renders an X in the top-right corner. You can wire it up with
-          something like <kbd>useDismissAlert()</kbd>.
+          something like <InlineCode>useDismissAlert()</InlineCode>.
         </p>
         <p>
           Is Dismissed? <var>{String(isDismissed)}</var>
@@ -72,7 +73,7 @@ export default Storybook.story('PageBanner', story => {
       <Fragment>
         <p>
           The banner will resize if it's shrunk really narrow. To make it expand inside a
-          flex parent set <kbd>flex-grow:1</kbd>.
+          flex parent set <InlineCode>flex-grow:1</InlineCode>.
         </p>
         <p>
           <Button size="sm" onClick={() => setFlexGrow(!flexGrow)}>
diff --git a/static/app/components/commandPalette/ui/commandPaletteStateContext.tsx b/static/app/components/commandPalette/ui/commandPaletteStateContext.tsx
index 97e0cd4f90b0d1..2ed99e8324520a 100644
--- a/static/app/components/commandPalette/ui/commandPaletteStateContext.tsx
+++ b/static/app/components/commandPalette/ui/commandPaletteStateContext.tsx
@@ -1,12 +1,13 @@
 import {createContext, useContext, useReducer, useRef} from 'react';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
+
 import {
   openCommandPaletteDeprecated,
   toggleCommandPalette,
 } from 'sentry/actionCreators/modal';
 import type {CommandPaletteActionWithKey} from 'sentry/components/commandPalette/types';
 import {unreachable} from 'sentry/utils/unreachable';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 export type LinkedList = {
diff --git a/static/app/components/container/negativeSpaceContainer.stories.tsx b/static/app/components/container/negativeSpaceContainer.stories.tsx
index 0017e6b02457c1..b2afeea8fec7d0 100644
--- a/static/app/components/container/negativeSpaceContainer.stories.tsx
+++ b/static/app/components/container/negativeSpaceContainer.stories.tsx
@@ -3,6 +3,8 @@ import {Fragment} from 'react';
 import bgPattern from 'sentry-images/spot/mobile-hero.jpg';
 import onboardingFrameworkSelectionJavascript from 'sentry-images/spot/replay-dead-rage-changelog.svg';
 
+import {InlineCode} from '@sentry/scraps/code';
+
 import {NegativeSpaceContainer} from 'sentry/components/container/negativeSpaceContainer';
 import * as Storybook from 'sentry/stories';
 
@@ -13,7 +15,7 @@ export default Storybook.story('NegativeSpaceContainer', story => {
         A <Storybook.JSXNode name="NegativeSpaceContainer" /> is a container with a
         diagonal pattern for a background. It will preserve the aspect ratio of whatever
         is inside it. It's a flex element, so the children are free to expand/contract
-        depending on whether things like <kbd>flex-grow: 1</kbd> are set.
+        depending on whether things like <InlineCode>flex-grow: 1</InlineCode> are set.
       </p>
       <p>Here's one with nothing inside it:</p>
       <NegativeSpaceContainer
diff --git a/static/app/components/copyToClipboardButton.stories.tsx b/static/app/components/copyToClipboardButton.stories.tsx
index fc23dbedab9a21..c4faaeb90d5685 100644
--- a/static/app/components/copyToClipboardButton.stories.tsx
+++ b/static/app/components/copyToClipboardButton.stories.tsx
@@ -1,6 +1,7 @@
 import {Fragment} from 'react';
 
 import {Button} from '@sentry/scraps/button';
+import {Kbd} from '@sentry/scraps/hotkey';
 
 import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
 import {IconLink} from 'sentry/icons';
@@ -14,7 +15,7 @@ export default Storybook.story('CopyToClipboardButton', story => {
       <p>
         By default the button will stick the{' '}
         <Storybook.JSXProperty name="text" value={String} /> value onto your clipboard; as
-        if you typed <kbd>CTRL+C</kbd> or <kbd>CMD+C</kbd>. It'll show toast messages, and
+        if you typed <Kbd>CTRL+C</Kbd> or <Kbd>CMD+C</Kbd>. It'll show toast messages, and
         includes <Storybook.JSXProperty name="onCopy" value={Function} /> &
         <Storybook.JSXProperty name="onError" value={Function} /> callbacks.
       </p>
diff --git a/static/app/components/core/hotkey/hotkey.mdx b/static/app/components/core/hotkey/hotkey.mdx
new file mode 100644
index 00000000000000..b1e4e207224caa
--- /dev/null
+++ b/static/app/components/core/hotkey/hotkey.mdx
@@ -0,0 +1,144 @@
+---
+title: Hotkey
+description: Components for displaying keyboard shortcuts with automatic platform-aware modifier rendering.
+category: utilities
+source: '@sentry/scraps/hotkey'
+resources:
+  js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/hotkey/index.tsx
+  a11y:
+    WCAG 1.3.1: https://www.w3.org/TR/WCAG22/#info-and-relationships
+---
+
+import {Hotkey, Kbd} from '@sentry/scraps/hotkey';
+import {Flex} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+
+import * as Storybook from 'sentry/stories';
+
+export const documentation = import('!!type-loader!@sentry/scraps/hotkey');
+
+The `<Hotkey>` component displays keyboard shortcuts using semantic `<kbd>` elements with automatic platform-aware modifier rendering. On Mac, `command` renders as `⌘`; on other platforms it renders as `CTRL`. The `<Kbd>` component renders a single styled key cap.
+
+## Hotkey
+
+`<Hotkey>` accepts the same key string format as the `useHotkeys` hook, making it easy to display the shortcuts you've already registered.
+
+<Storybook.Demo>
+  <Flex gap="xl" align="center">
+    <Flex gap="sm" align="center">
+      <Text>Save:</Text>
+      <Hotkey value="command+s" />
+    </Flex>
+    <Flex gap="sm" align="center">
+      <Text>Search:</Text>
+      <Hotkey value="command+k" />
+    </Flex>
+    <Flex gap="sm" align="center">
+      <Text>Copy:</Text>
+      <Hotkey value="command+c" />
+    </Flex>
+  </Flex>
+</Storybook.Demo>
+
+```jsx
+<Hotkey value="command+s" />
+<Hotkey value="command+k" />
+<Hotkey value="command+c" />
+```
+
+### Platform Mapping
+
+Modifiers are automatically mapped per platform. No fallback arrays needed for standard modifier differences.
+
+| Key name  | Mac | Other platforms |
+| --------- | --- | --------------- |
+| `command` | `⌘` | `CTRL`          |
+| `ctrl`    | `⌃` | `CTRL`          |
+| `alt`     | `⌥` | `ALT`           |
+| `option`  | `⌥` | `ALT`           |
+| `shift`   | `⇧` | `⇧`             |
+
+### Complex Shortcuts
+
+<Storybook.Demo>
+  <Flex gap="xl" align="center">
+    <Flex gap="sm" align="center">
+      <Text>Undo:</Text>
+      <Hotkey value="command+z" />
+    </Flex>
+    <Flex gap="sm" align="center">
+      <Text>Redo:</Text>
+      <Hotkey value="command+shift+z" />
+    </Flex>
+    <Flex gap="sm" align="center">
+      <Text>Navigate:</Text>
+      <Hotkey value="shift+up" />
+    </Flex>
+  </Flex>
+</Storybook.Demo>
+
+```jsx
+<Hotkey value="command+z" />
+<Hotkey value="command+shift+z" />
+<Hotkey value="shift+up" />
+```
+
+### Array Form
+
+Pass an array when the actual keys (not just modifiers) differ across platforms. The first combo is used.
+
+```jsx
+<Hotkey value={['command+backspace', 'delete']} />
+```
+
+## Kbd
+
+`<Kbd>` renders a single styled key cap. Use it for standalone key references in prose or documentation.
+
+<Storybook.Demo>
+  <Flex gap="lg" align="center">
+    <Text>
+      Press <Kbd>Esc</Kbd> to close
+    </Text>
+    <Text>
+      Use <Kbd>Tab</Kbd> to navigate
+    </Text>
+    <Text>
+      Hit <Kbd>Enter</Kbd> to confirm
+    </Text>
+  </Flex>
+</Storybook.Demo>
+
+```jsx
+<Text>
+  Press <Kbd>Esc</Kbd> to close
+</Text>
+<Text>
+  Use <Kbd>Tab</Kbd> to navigate
+</Text>
+```
+
+## useHotkeys Hook
+
+The `useHotkeys` hook registers keyboard shortcuts. It uses the same key string format as `<Hotkey>`, so you can display exactly what you register.
+
+```jsx
+import {Hotkey, useHotkeys} from '@sentry/scraps/hotkey';
+
+function MyComponent() {
+  useHotkeys([
+    {match: 'command+k', callback: () => openSearch()},
+    {match: ['command+/', 'ctrl+/'], callback: () => openHelp()},
+  ]);
+
+  return (
+    <Text>
+      Search: <Hotkey value="command+k" />
+    </Text>
+  );
+}
+```
+
+## Accessibility
+
+Both `<Hotkey>` and `<Kbd>` render semantic `<kbd>` HTML elements. `<Hotkey>` uses nested `<kbd>` elements (an outer `<kbd>` wrapping inner `<kbd>` elements for each key), which is the correct HTML semantics for a key combination.
diff --git a/static/app/components/core/hotkey/hotkey.spec.tsx b/static/app/components/core/hotkey/hotkey.spec.tsx
new file mode 100644
index 00000000000000..a04cf823d7132f
--- /dev/null
+++ b/static/app/components/core/hotkey/hotkey.spec.tsx
@@ -0,0 +1,101 @@
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {Hotkey} from '@sentry/scraps/hotkey';
+
+jest.mock('@react-aria/utils', () => ({
+  ...jest.requireActual('@react-aria/utils'),
+  isMac: jest.fn(() => false),
+}));
+
+const {isMac} = jest.requireMock<{isMac: jest.Mock}>('@react-aria/utils');
+
+describe('Hotkey', () => {
+  describe('mac platform', () => {
+    beforeEach(() => {
+      isMac.mockReturnValue(true);
+    });
+
+    it('renders command as ⌘', () => {
+      render(<Hotkey value="command+k" />);
+      expect(screen.getByText('\u2318')).toBeInTheDocument();
+      expect(screen.getByText('K')).toBeInTheDocument();
+    });
+
+    it('renders ctrl as ⌃', () => {
+      render(<Hotkey value="ctrl+alt+delete" />);
+      expect(screen.getByText('\u2303')).toBeInTheDocument();
+      expect(screen.getByText('\u2325')).toBeInTheDocument();
+      expect(screen.getByText('DEL')).toBeInTheDocument();
+    });
+
+    it('renders option as ⌥', () => {
+      render(<Hotkey value="option+x" />);
+      expect(screen.getByText('\u2325')).toBeInTheDocument();
+      expect(screen.getByText('X')).toBeInTheDocument();
+    });
+  });
+
+  describe('non-mac platform', () => {
+    beforeEach(() => {
+      isMac.mockReturnValue(false);
+    });
+
+    it('renders command as CTRL', () => {
+      render(<Hotkey value="command+k" />);
+      expect(screen.getByText('CTRL')).toBeInTheDocument();
+      expect(screen.getByText('K')).toBeInTheDocument();
+    });
+
+    it('renders ctrl as CTRL', () => {
+      render(<Hotkey value="ctrl+alt+delete" />);
+      expect(screen.getByText('CTRL')).toBeInTheDocument();
+      expect(screen.getByText('ALT')).toBeInTheDocument();
+      expect(screen.getByText('DEL')).toBeInTheDocument();
+    });
+
+    it('renders option as ALT', () => {
+      render(<Hotkey value="option+x" />);
+      expect(screen.getByText('ALT')).toBeInTheDocument();
+      expect(screen.getByText('X')).toBeInTheDocument();
+    });
+
+    it('renders shift as ⇧', () => {
+      render(<Hotkey value="shift+up" />);
+      expect(screen.getByText('\u21e7')).toBeInTheDocument();
+      expect(screen.getByText('\u2191')).toBeInTheDocument();
+    });
+  });
+
+  describe('string input', () => {
+    beforeEach(() => {
+      isMac.mockReturnValue(true);
+    });
+
+    it('accepts a single string', () => {
+      render(<Hotkey value="command+/" />);
+      expect(screen.getByText('\u2318')).toBeInTheDocument();
+      expect(screen.getByText('/')).toBeInTheDocument();
+    });
+  });
+
+  describe('array input', () => {
+    beforeEach(() => {
+      isMac.mockReturnValue(true);
+    });
+
+    it('uses first combo from array', () => {
+      render(<Hotkey value={['command+backspace', 'delete']} />);
+      expect(screen.getByText('\u2318')).toBeInTheDocument();
+      expect(screen.getByText('\u232b')).toBeInTheDocument();
+    });
+  });
+
+  describe('semantic HTML', () => {
+    it('renders nested kbd elements', () => {
+      render(<Hotkey value="command+k" />);
+      const kbdElements = document.querySelectorAll('kbd');
+      // Outer wrapper + 2 inner keys
+      expect(kbdElements).toHaveLength(3);
+    });
+  });
+});
diff --git a/static/app/components/core/hotkey/hotkey.tsx b/static/app/components/core/hotkey/hotkey.tsx
new file mode 100644
index 00000000000000..bd865c43df6c28
--- /dev/null
+++ b/static/app/components/core/hotkey/hotkey.tsx
@@ -0,0 +1,73 @@
+import styled from '@emotion/styled';
+import {isMac as detectIsMac} from '@react-aria/utils';
+
+import {toArray} from 'sentry/utils/array/toArray';
+
+import {Kbd} from './kbd';
+import {resolveKeyGlyph} from './keyMappings';
+
+export interface HotkeyProps {
+  /**
+   * Key combination string(s) in the same format as `useHotkeys` match strings.
+   * Keys are separated by `+`. For example: `"command+k"`, `"shift+enter"`.
+   *
+   * Platform modifiers are mapped automatically:
+   * - `command` renders as `⌘` on Mac, `CTRL` on other platforms
+   * - `ctrl` renders as `⌃` on Mac, `CTRL` on other platforms
+   * - `alt`/`option` renders as `⌥` on Mac, `ALT` on other platforms
+   *
+   * Pass an array only when the actual keys differ across platforms
+   * (not just modifier names). The first compatible combo is used:
+   *
+   * ```tsx
+   * <Hotkey value={['command+backspace', 'delete']} />
+   * ```
+   */
+  value: string | string[];
+  variant?: 'embossed' | 'debossed';
+}
+
+export function Hotkey({value, variant}: HotkeyProps) {
+  const isMac = detectIsMac();
+
+  const keySets = toArray(value).map(v => v.trim().split('+'));
+
+  // Resolve glyphs for each key set
+  const resolved = keySets.map(keys => keys.map(key => resolveKeyGlyph(key, isMac)));
+
+  // If multiple combos provided, prefer the first one.
+  // (With auto platform mapping, a single string works cross-platform,
+  // so the array form is only for truly different key combos.)
+  const finalKeys = resolved[0];
+
+  if (!finalKeys || finalKeys.length === 0) {
+    return null;
+  }
+
+  return (
+    <WrapperKbd variant={variant}>
+      {finalKeys.map((glyph, i) => (
+        <StyledKbd key={i}>{glyph}</StyledKbd>
+      ))}
+    </WrapperKbd>
+  );
+}
+
+const WrapperKbd = styled(Kbd)`
+  padding: 0 ${p => p.theme.space.xs};
+  gap: ${p => p.theme.space['2xs']};
+`;
+
+const StyledKbd = styled('kbd')`
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+  border: 0;
+  border-radius: ${p => p.theme.radius['2xs']};
+  box-shadow: none;
+`;
diff --git a/static/app/components/core/hotkey/index.tsx b/static/app/components/core/hotkey/index.tsx
new file mode 100644
index 00000000000000..35a656993729f0
--- /dev/null
+++ b/static/app/components/core/hotkey/index.tsx
@@ -0,0 +1,3 @@
+export {Kbd} from './kbd';
+export {Hotkey} from './hotkey';
+export {useHotkeys} from './useHotkeys';
diff --git a/static/app/components/core/hotkey/kbd.spec.tsx b/static/app/components/core/hotkey/kbd.spec.tsx
new file mode 100644
index 00000000000000..0f99f879d0f74a
--- /dev/null
+++ b/static/app/components/core/hotkey/kbd.spec.tsx
@@ -0,0 +1,21 @@
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {Kbd} from '@sentry/scraps/hotkey';
+
+describe('Kbd', () => {
+  it('renders a kbd element', () => {
+    render(<Kbd>K</Kbd>);
+    const el = screen.getByText('K');
+    expect(el.tagName).toBe('KBD');
+  });
+
+  it('forwards className', () => {
+    render(<Kbd className="custom">X</Kbd>);
+    expect(screen.getByText('X')).toHaveClass('custom');
+  });
+
+  it('renders glyph characters', () => {
+    render(<Kbd>{'\u2318'}</Kbd>);
+    expect(screen.getByText('\u2318')).toBeInTheDocument();
+  });
+});
diff --git a/static/app/components/core/hotkey/kbd.tsx b/static/app/components/core/hotkey/kbd.tsx
new file mode 100644
index 00000000000000..060db7073d7cfc
--- /dev/null
+++ b/static/app/components/core/hotkey/kbd.tsx
@@ -0,0 +1,40 @@
+import {css, useTheme, type Theme} from '@emotion/react';
+
+export const kbdStyles = (theme: Theme, variant?: KbdProps['variant']) => css`
+  margin: 0;
+  padding: 0 ${theme.space['2xs']};
+
+  font-family: ${theme.font.family.mono};
+  font-size: ${theme.font.size.sm};
+  font-weight: ${theme.font.weight.sans.medium};
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  color: ${variant === 'debossed'
+    ? theme.tokens.content.secondary
+    : theme.tokens.content.primary};
+  background: ${variant === 'debossed'
+    ? theme.tokens.background.secondary
+    : theme.tokens.background.primary};
+  border: ${theme.border.md} solid ${theme.tokens.border.primary};
+  border-top: ${variant === 'debossed'
+    ? `${theme.border.xl} solid ${theme.tokens.border.primary}`
+    : undefined};
+  border-bottom: ${variant === 'debossed'
+    ? undefined
+    : `${theme.border.xl} solid ${theme.tokens.border.primary}`};
+  border-radius: ${theme.radius.sm};
+  box-shadow: none;
+`;
+
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+  variant?: 'embossed' | 'debossed';
+}
+
+export function Kbd(props: KbdProps) {
+  const theme = useTheme();
+  return <kbd css={kbdStyles(theme, props.variant)} {...props} />;
+}
diff --git a/static/app/components/core/hotkey/keyMappings.ts b/static/app/components/core/hotkey/keyMappings.ts
new file mode 100644
index 00000000000000..7eb82940b92c8e
--- /dev/null
+++ b/static/app/components/core/hotkey/keyMappings.ts
@@ -0,0 +1,145 @@
+import * as Sentry from '@sentry/react';
+
+// Key name → keyCode mapping (from https://github.com/jaywcjlove/hotkeys)
+const keyNameCodeMapping: Record<string, number> = {
+  backspace: 8,
+  tab: 9,
+  clear: 12,
+  enter: 13,
+  return: 13,
+  esc: 27,
+  escape: 27,
+  space: 32,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  del: 46,
+  delete: 46,
+  ins: 45,
+  insert: 45,
+  home: 36,
+  end: 35,
+  pageup: 33,
+  pagedown: 34,
+  capslock: 20,
+  num_0: 96,
+  num_1: 97,
+  num_2: 98,
+  num_3: 99,
+  num_4: 100,
+  num_5: 101,
+  num_6: 102,
+  num_7: 103,
+  num_8: 104,
+  num_9: 105,
+  num_multiply: 106,
+  num_add: 107,
+  num_enter: 108,
+  num_subtract: 109,
+  num_decimal: 110,
+  num_divide: 111,
+  '\u21ea': 20,
+  ',': 188,
+  '.': 190,
+  '/': 191,
+  '`': 192,
+  '-': 189,
+  '=': 187,
+  ';': 186,
+  "'": 222,
+  '[': 219,
+  ']': 221,
+  '\\': 220,
+};
+
+const modifierNameKeyCodeMapping: Record<string, number> = {
+  '\u21e7': 16,
+  shift: 16,
+  '\u2325': 18,
+  alt: 18,
+  option: 18,
+  '\u2303': 17,
+  ctrl: 17,
+  control: 17,
+  '\u2318': 91,
+  cmd: 91,
+  command: 91,
+};
+
+/**
+ * Get the keyCode for a key name. Used by useHotkeys for event matching.
+ */
+export function getKeyCode(x: string): number {
+  const key = x.toLowerCase();
+  return (
+    keyNameCodeMapping[key] ??
+    modifierNameKeyCodeMapping[key] ??
+    x.toUpperCase().charCodeAt(0)
+  );
+}
+
+// Display glyph mappings
+
+const macGlyphs: Record<string, string> = {
+  command: '\u2318',
+  cmd: '\u2318',
+  meta: '\u2318',
+  ctrl: '\u2303',
+  control: '\u2303',
+  alt: '\u2325',
+  option: '\u2325',
+  shift: '\u21e7',
+};
+
+const genericGlyphs: Record<string, string> = {
+  command: 'CTRL',
+  cmd: 'CTRL',
+  meta: 'CTRL',
+  ctrl: 'CTRL',
+  control: 'CTRL',
+  alt: 'ALT',
+  option: 'ALT',
+  shift: '\u21e7',
+};
+
+const universalGlyphs: Record<string, string> = {
+  backspace: '\u232b',
+  delete: 'DEL',
+  del: 'DEL',
+  left: '\u2190',
+  up: '\u2191',
+  right: '\u2192',
+  down: '\u2193',
+  enter: '\u21b5',
+  return: '\u21b5',
+  tab: '\u21e5',
+  escape: 'ESC',
+  esc: 'ESC',
+  space: '\u2423',
+};
+
+/**
+ * Resolve a key name to its display glyph for the given platform.
+ * Non-special keys are uppercased.
+ */
+export function resolveKeyGlyph(keyName: string, isMac: boolean): string {
+  const key = keyName.toLowerCase();
+  const platformGlyphs = isMac ? macGlyphs : genericGlyphs;
+  const glyph = platformGlyphs[key] ?? universalGlyphs[key];
+
+  if (glyph) {
+    return glyph;
+  }
+
+  // Single-char keys (e.g. 'k', '/') are expected to fall through — they just get uppercased.
+  // Multi-char keys without a mapping are genuinely missing and should be flagged.
+  if (key.length > 1) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(`Missing key glyph mapping for "${keyName}"`);
+    }
+    Sentry.logger.warn('Missing key glyph mapping', {keyName});
+  }
+
+  return keyName.toUpperCase();
+}
diff --git a/static/app/utils/useHotkeys.spec.tsx b/static/app/components/core/hotkey/useHotkeys.spec.tsx
similarity index 95%
rename from static/app/utils/useHotkeys.spec.tsx
rename to static/app/components/core/hotkey/useHotkeys.spec.tsx
index bb74a213644ee6..6227000b4c0a95 100644
--- a/static/app/utils/useHotkeys.spec.tsx
+++ b/static/app/components/core/hotkey/useHotkeys.spec.tsx
@@ -1,7 +1,9 @@
 import {renderHook} from 'sentry-test/reactTestingLibrary';
 
-import {getKeyCode} from 'sentry/utils/getKeyCode';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
+import {useHotkeys} from '@sentry/scraps/hotkey';
+
+// eslint-disable-next-line boundaries/entry-point
+import {getKeyCode} from './keyMappings';
 
 describe('useHotkeys', () => {
   let events: Record<string, (evt: EventListenerOrEventListenerObject) => void> = {};
@@ -15,10 +17,8 @@ describe('useHotkeys', () => {
   }
 
   beforeEach(() => {
-    // Empty our events before each test case
     events = {};
 
-    // Define the addEventListener method with a Jest mock function
     document.addEventListener = jest.fn((event: string, callback: () => any) => {
       events[event] = callback;
     });
diff --git a/static/app/utils/useHotkeys.tsx b/static/app/components/core/hotkey/useHotkeys.tsx
similarity index 96%
rename from static/app/utils/useHotkeys.tsx
rename to static/app/components/core/hotkey/useHotkeys.tsx
index a29c0eaee25d43..08cafc00d5d3bd 100644
--- a/static/app/utils/useHotkeys.tsx
+++ b/static/app/components/core/hotkey/useHotkeys.tsx
@@ -2,9 +2,10 @@ import {useEffect, useRef} from 'react';
 
 import {toArray} from 'sentry/utils/array/toArray';
 
-import {getKeyCode} from './getKeyCode';
+import {getKeyCode} from './keyMappings';
 
 const isKeyPressed = (key: string, evt: KeyboardEvent): boolean => {
+  // TODO(design-eng): we should just use `key`, `keyCode` is deprecated
   const keyCode = getKeyCode(key);
   switch (keyCode) {
     case getKeyCode('command'):
diff --git a/static/app/components/core/inspector.tsx b/static/app/components/core/inspector.tsx
index b7e7687aa5f8c7..ba7557cd8c1cf4 100644
--- a/static/app/components/core/inspector.tsx
+++ b/static/app/components/core/inspector.tsx
@@ -4,6 +4,7 @@ import {usePopper} from 'react-popper';
 import {css, useTheme} from '@emotion/react';
 
 import {Tag} from '@sentry/scraps/badge';
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {Flex, Stack} from '@sentry/scraps/layout';
 import {Separator} from '@sentry/scraps/separator';
 import {Text} from '@sentry/scraps/text';
@@ -27,7 +28,6 @@ import {
 } from 'sentry/stories/view/useStoriesLoader';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useContextMenu} from 'sentry/utils/profiling/hooks/useContextMenu';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 type TraceElement = HTMLElement | SVGElement;
diff --git a/static/app/components/core/text/prose.tsx b/static/app/components/core/text/prose.tsx
index cb4986f3b17abb..da72ccb1a30734 100644
--- a/static/app/components/core/text/prose.tsx
+++ b/static/app/components/core/text/prose.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import {inlineCodeStyles} from '@sentry/scraps/code';
+import {kbdStyles} from '@sentry/scraps/hotkey/kbd';
 
 type ProsePropsWithChildren<T extends keyof HTMLElementTagNameMap = 'div'> = {
   as?: T;
@@ -46,5 +47,8 @@ export const Prose = styled(
   code:not(pre code) {
     ${p => inlineCodeStyles(p.theme)};
   }
+  kbd {
+    ${p => kbdStyles(p.theme)};
+  }
   /* stylelint-enable */
 `;
diff --git a/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx b/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx
index 773f8c9249eb35..59fbd5a5ff98c5 100644
--- a/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx
+++ b/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx
@@ -4,6 +4,7 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {Button, LinkButton} from '@sentry/scraps/button';
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {Flex, Grid} from '@sentry/scraps/layout';
 
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
@@ -17,7 +18,6 @@ import type {EventAttachment} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
 import {formatBytesBase2} from 'sentry/utils/bytes/formatBytesBase2';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 import {ScreenshotPagination} from './screenshotPagination';
diff --git a/static/app/components/globalDrawer/index.tsx b/static/app/components/globalDrawer/index.tsx
index cc0b5c354aed76..07724b8a97a6d8 100644
--- a/static/app/components/globalDrawer/index.tsx
+++ b/static/app/components/globalDrawer/index.tsx
@@ -11,13 +11,13 @@ import type {Interpolation, Theme} from '@emotion/react';
 import {AnimatePresence, type Transition} from 'framer-motion';
 import type {Location} from 'history';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {useScrollLock} from '@sentry/scraps/useScrollLock';
 
 import {ErrorBoundary} from 'sentry/components/errorBoundary';
 import {DrawerComponents} from 'sentry/components/globalDrawer/components';
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOnClickOutside} from 'sentry/utils/useOnClickOutside';
 
diff --git a/static/app/components/hotkeysLabel.spec.tsx b/static/app/components/hotkeysLabel.spec.tsx
deleted file mode 100644
index 00de8ff3d31d5e..00000000000000
--- a/static/app/components/hotkeysLabel.spec.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import {render, screen} from 'sentry-test/reactTestingLibrary';
-
-import {HotkeysLabel} from 'sentry/components/hotkeysLabel';
-
-describe('HotkeysLabel', () => {
-  it('ctrl+alt+delete mac', () => {
-    render(<HotkeysLabel value={['ctrl+alt+delete']} forcePlatform="macos" />);
-    expect(screen.getByText('⌃')).toBeInTheDocument();
-    expect(screen.getByText('⌥')).toBeInTheDocument();
-    expect(screen.getByText('DELETE')).toBeInTheDocument();
-  });
-
-  it('ctrl+alt+delete windows', () => {
-    render(<HotkeysLabel value={['ctrl+alt+delete']} forcePlatform="generic" />);
-    expect(screen.getByText('CTRL')).toBeInTheDocument();
-    expect(screen.getByText('ALT')).toBeInTheDocument();
-    expect(screen.getByText('DELETE')).toBeInTheDocument();
-  });
-
-  it('falls back when not on mac', () => {
-    render(<HotkeysLabel value={['cmd', 'alt']} forcePlatform="generic" />);
-    expect(screen.queryByText('⌘')).not.toBeInTheDocument();
-    expect(screen.queryByText('CMD')).not.toBeInTheDocument();
-
-    expect(screen.getByText('ALT')).toBeInTheDocument();
-  });
-
-  it('does not render at all without fallback', () => {
-    render(<HotkeysLabel value={['cmd+k', 'cmd+alt+l']} forcePlatform="generic" />);
-    expect(screen.queryByText('⌘')).not.toBeInTheDocument();
-    expect(screen.queryByText('L')).not.toBeInTheDocument();
-    expect(screen.queryByText('ALT')).not.toBeInTheDocument();
-  });
-
-  it('takes just a string', () => {
-    render(<HotkeysLabel value="option" forcePlatform="generic" />);
-    expect(screen.getByText('ALT')).toBeInTheDocument();
-  });
-});
diff --git a/static/app/components/hotkeysLabel.tsx b/static/app/components/hotkeysLabel.tsx
deleted file mode 100644
index 8df1e6b5e55220..00000000000000
--- a/static/app/components/hotkeysLabel.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import styled from '@emotion/styled';
-
-import {toArray} from 'sentry/utils/array/toArray';
-import {getKeyCode} from 'sentry/utils/getKeyCode';
-
-const macModifiers = {
-  18: '⌥',
-  17: '⌃',
-  91: '⌘',
-};
-
-const normalModifiers = {
-  18: 'ALT',
-  17: 'CTRL',
-};
-
-const genericGlyphs = {
-  16: '⇧',
-  8: '⌫',
-  37: '←',
-  38: '↑',
-  39: '→',
-  40: '↓',
-  107: '+',
-};
-
-const keyToDisplay = (
-  key: string,
-  isMac: boolean
-): {label: React.ReactNode; specificToOs: 'macos' | 'generic'} => {
-  const keyCode = getKeyCode(key);
-
-  // Not a special key
-  if (!keyCode) {
-    return {label: <Key>{key.toUpperCase()}</Key>, specificToOs: 'generic'};
-  }
-
-  const modifierMap = isMac ? macModifiers : normalModifiers;
-  // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-  const keyStr = modifierMap[keyCode] ?? genericGlyphs[keyCode] ?? key.toUpperCase();
-
-  const specificToOs = keyCode === getKeyCode('command') ? 'macos' : 'generic';
-
-  return {label: <Key key={keyStr}>{keyStr}</Key>, specificToOs};
-};
-
-type Props = {
-  /**
-   * Pass key combinations in with + as the separator.
-   * For example: `'command+option+x'`
-   *
-   * Pass an array of strings for fallback key combos when the first one contains a key that does not exist on that os (non-mac):
-   * `['command+option+x', 'ctrl+shift+x']`
-   * (does not have to be the same combo)
-   */
-  value: string[] | string;
-  forcePlatform?: 'macos' | 'generic';
-};
-
-export function HotkeysLabel({value, forcePlatform}: Props) {
-  // Split by commas and then split by +, but allow escaped /+
-  const hotkeySets = toArray(value).map(o => o.trim().split('+'));
-
-  const isMac = forcePlatform
-    ? forcePlatform === 'macos'
-    : (window?.navigator?.platform?.toLowerCase().startsWith('mac') ?? false);
-
-  // If we're not using mac find the first key set that is generic.
-  // Otherwise show whatever the first hotkey is.
-  const finalKeySet = hotkeySets
-    .map(keySet => keySet.map(key => keyToDisplay(key, isMac)))
-    .find(keySet => (isMac ? true : keySet.every(key => key.specificToOs === 'generic')));
-
-  // No key available for the OS. Don't show a hotkey
-  if (finalKeySet === undefined) {
-    return null;
-  }
-
-  return <HotkeysContainer>{finalKeySet.map(key => key.label)}</HotkeysContainer>;
-}
-
-const Key = styled('span')`
-  font-size: ${p => p.theme.font.size.md};
-`;
-
-const HotkeysContainer = styled('div')`
-  font-family: ${p => p.theme.font.family.sans};
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  > * {
-    margin-right: ${p => p.theme.space.xs};
-  }
-`;
diff --git a/static/app/components/searchBar/searchDropdown.tsx b/static/app/components/searchBar/searchDropdown.tsx
index 5ff4495de19096..333aad119d6ba6 100644
--- a/static/app/components/searchBar/searchDropdown.tsx
+++ b/static/app/components/searchBar/searchDropdown.tsx
@@ -4,9 +4,9 @@ import styled from '@emotion/styled';
 
 import {Tag} from '@sentry/scraps/badge';
 import {Button, LinkButton} from '@sentry/scraps/button';
+import {Hotkey} from '@sentry/scraps/hotkey';
 import {Flex, Grid} from '@sentry/scraps/layout';
 
-import {HotkeysLabel} from 'sentry/components/hotkeysLabel';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {Overlay} from 'sentry/components/overlay';
 import type {BooleanOperator, SearchConfig} from 'sentry/components/searchSyntax/parser';
@@ -147,7 +147,7 @@ export function SearchDropdown({
                 onClick={() => runShortcut(shortcut)}
               >
                 <HotkeyGlyphWrapper>
-                  <HotkeysLabel
+                  <Hotkey
                     value={shortcut.hotkeys?.display ?? shortcut.hotkeys?.actual ?? []}
                   />
                 </HotkeyGlyphWrapper>
diff --git a/static/app/components/tables/gridEditable/index.stories.tsx b/static/app/components/tables/gridEditable/index.stories.tsx
index 5bfe1bfdc8269b..34aa2131af1e37 100644
--- a/static/app/components/tables/gridEditable/index.stories.tsx
+++ b/static/app/components/tables/gridEditable/index.stories.tsx
@@ -1,6 +1,7 @@
 import {Fragment, useState} from 'react';
 
 import {Button} from '@sentry/scraps/button';
+import {InlineCode} from '@sentry/scraps/code';
 
 import type {
   GridColumnOrder,
@@ -166,8 +167,9 @@ export default Storybook.story('GridEditable', story => {
           </div>
           <div>
             <p>
-              In this example we are using <kbd>useQueryBasedColumnResize</kbd>. Notice
-              how the url updates after you drag columns.
+              In this example we are using{' '}
+              <InlineCode>useQueryBasedColumnResize</InlineCode>. Notice how the url
+              updates after you drag columns.
             </p>
             <GridEditable
               data={data}
diff --git a/static/app/components/themeAndStyleProvider.tsx b/static/app/components/themeAndStyleProvider.tsx
index 4852fbc9da2a99..abacbdf80cf515 100644
--- a/static/app/components/themeAndStyleProvider.tsx
+++ b/static/app/components/themeAndStyleProvider.tsx
@@ -3,6 +3,8 @@ import {createPortal} from 'react-dom';
 import createCache from '@emotion/cache';
 import {CacheProvider, ThemeProvider} from '@emotion/react';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
+
 import {printConsoleBanner} from 'sentry/bootstrap/printConsoleBanner';
 import {NODE_ENV} from 'sentry/constants';
 import {ConfigStore} from 'sentry/stores/configStore';
@@ -11,7 +13,6 @@ import {GlobalStyles} from 'sentry/styles/global';
 import {removeBodyTheme} from 'sentry/utils/removeBodyTheme';
 // eslint-disable-next-line no-restricted-imports
 import {darkTheme, lightTheme} from 'sentry/utils/theme/theme';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 
 const SentryComponentInspector =
   NODE_ENV === 'development'
diff --git a/static/app/components/tours/components.tsx b/static/app/components/tours/components.tsx
index 87e35d24e0ea2b..573375ca683e2c 100644
--- a/static/app/components/tours/components.tsx
+++ b/static/app/components/tours/components.tsx
@@ -5,6 +5,7 @@ import {ClassNames, ThemeProvider, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {Button} from '@sentry/scraps/button';
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {Flex, Grid} from '@sentry/scraps/layout';
 
 import {Overlay, PositionWrapper} from 'sentry/components/overlay';
@@ -22,7 +23,6 @@ import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useInvertedTheme} from 'sentry/utils/theme/useInvertedTheme';
 import {useEffectAfterFirstRender} from 'sentry/utils/useEffectAfterFirstRender';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useOverlay, type UseOverlayProps} from 'sentry/utils/useOverlay';
 
diff --git a/static/app/debug/notifications/components/debugNotificationsSearch.tsx b/static/app/debug/notifications/components/debugNotificationsSearch.tsx
index 34b85f8168e2c2..44c1f860d71990 100644
--- a/static/app/debug/notifications/components/debugNotificationsSearch.tsx
+++ b/static/app/debug/notifications/components/debugNotificationsSearch.tsx
@@ -8,6 +8,7 @@ import type {CollectionChildren} from '@react-types/shared';
 
 import {Badge} from '@sentry/scraps/badge';
 import {ListBox} from '@sentry/scraps/compactSelect';
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {InputGroup} from '@sentry/scraps/input';
 
 import {Overlay} from 'sentry/components/overlay';
@@ -16,7 +17,6 @@ import {useRegistry} from 'sentry/debug/notifications/hooks/useRegistry';
 import {IconSearch} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {fzf} from 'sentry/utils/search/fzf';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useNavigate} from 'sentry/utils/useNavigate';
 
 export function DebugNotificationsSearch() {
diff --git a/static/app/stories/view/storySearch.tsx b/static/app/stories/view/storySearch.tsx
index f5d9baf4491688..78a3f9b2827ab5 100644
--- a/static/app/stories/view/storySearch.tsx
+++ b/static/app/stories/view/storySearch.tsx
@@ -6,8 +6,8 @@ import {Item, Section} from '@react-stately/collections';
 import {useComboBoxState} from '@react-stately/combobox';
 import type {CollectionChildren} from '@react-types/shared';
 
-import {Badge} from '@sentry/scraps/badge';
 import {ListBox} from '@sentry/scraps/compactSelect';
+import {useHotkeys, Hotkey} from '@sentry/scraps/hotkey';
 import {InputGroup} from '@sentry/scraps/input';
 import {Text} from '@sentry/scraps/text';
 
@@ -25,7 +25,6 @@ import {
 } from 'sentry/stories/view/storyTree';
 import {fzf} from 'sentry/utils/search/fzf';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
@@ -157,7 +156,7 @@ function SearchInput(
       </InputGroup.LeadingItems>
       <InputGroup.Input ref={props.ref} nativeSize={nativeSize} {...nativeProps} />
       <InputGroup.TrailingItems>
-        <Badge variant="internal">/</Badge>
+        <Hotkey value="/" />
       </InputGroup.TrailingItems>
     </InputGroup>
   );
diff --git a/static/app/stories/view/storyTree.tsx b/static/app/stories/view/storyTree.tsx
index bf4d1b1242da4d..727ed4c85dd21c 100644
--- a/static/app/stories/view/storyTree.tsx
+++ b/static/app/stories/view/storyTree.tsx
@@ -158,7 +158,7 @@ export const COMPONENT_SUBCATEGORY_CONFIG: Record<
   },
   buttons: {
     label: 'Buttons',
-    components: ['button', 'linkbutton'],
+    components: ['button', 'linkbutton', 'avatarbutton'],
   },
   controls: {
     label: 'Controls',
@@ -191,7 +191,7 @@ export const COMPONENT_SUBCATEGORY_CONFIG: Record<
   },
   status: {
     label: 'Status',
-    components: ['alert', 'badge', 'tag', 'toast'],
+    components: ['alert', 'badge', 'tag', 'toast', 'statusindicator'],
   },
   display: {
     label: 'Display',
@@ -203,7 +203,7 @@ export const COMPONENT_SUBCATEGORY_CONFIG: Record<
   },
   utilities: {
     label: 'Utilities',
-    components: ['separator', 'interactionstatelayer'],
+    components: ['separator', 'hotkey', 'interactionstatelayer'],
   },
   shared: {
     label: 'Shared',
diff --git a/static/app/utils/api/useFetchSequentialPages.stories.tsx b/static/app/utils/api/useFetchSequentialPages.stories.tsx
index 15dc2290514c5c..73213681623f61 100644
--- a/static/app/utils/api/useFetchSequentialPages.stories.tsx
+++ b/static/app/utils/api/useFetchSequentialPages.stories.tsx
@@ -1,5 +1,7 @@
 import {Fragment, useCallback, useRef} from 'react';
 
+import {InlineCode} from '@sentry/scraps/code';
+
 import {StructuredEventData} from 'sentry/components/structuredEventData';
 import * as Storybook from 'sentry/stories';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
@@ -90,7 +92,8 @@ export default Storybook.story('useFetchSequentialPages', story => {
       <Fragment>
         <p>
           You can stop a series of requests from continuing by returning a{' '}
-          <kbd>undefined</kbd> from the <code>getQueryKey</code> callback.
+          <InlineCode>undefined</InlineCode> from the <InlineCode>getQueryKey</InlineCode>{' '}
+          callback.
         </p>
         <p>Here we limit the number of pages to 2</p>
         <StructuredEventData data={{pages: pages.length, isFetching}} />
diff --git a/static/app/utils/getKeyCode.ts b/static/app/utils/getKeyCode.ts
deleted file mode 100644
index ef0d3dc767f96c..00000000000000
--- a/static/app/utils/getKeyCode.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-// key maps and utils retrieved from https://github.com/jaywcjlove/hotkeys
-
-/**
- * Includes a lot of leftover unused codes for the future in case we
- * want glyphs for them
- */
-const keyNameCodeMapping = {
-  backspace: 8,
-  tab: 9,
-  clear: 12,
-  enter: 13,
-  return: 13,
-  esc: 27,
-  escape: 27,
-  space: 32,
-  left: 37,
-  up: 38,
-  right: 39,
-  down: 40,
-  del: 46,
-  delete: 46,
-  ins: 45,
-  insert: 45,
-  home: 36,
-  end: 35,
-  pageup: 33,
-  pagedown: 34,
-  capslock: 20,
-  num_0: 96,
-  num_1: 97,
-  num_2: 98,
-  num_3: 99,
-  num_4: 100,
-  num_5: 101,
-  num_6: 102,
-  num_7: 103,
-  num_8: 104,
-  num_9: 105,
-  num_multiply: 106,
-  num_add: 107,
-  num_enter: 108,
-  num_subtract: 109,
-  num_decimal: 110,
-  num_divide: 111,
-  '⇪': 20,
-  ',': 188,
-  '.': 190,
-  '/': 191,
-  '`': 192,
-  '-': 189,
-  '=': 187,
-  ';': 186,
-  "'": 222,
-  '[': 219,
-  ']': 221,
-  '\\': 220,
-};
-
-// Modifier Keys
-const modifierNameKeyCodeMapping = {
-  // shiftKey
-  '⇧': 16,
-  shift: 16,
-  // altKey
-  '⌥': 18,
-  alt: 18,
-  option: 18,
-  // ctrlKey
-  '⌃': 17,
-  ctrl: 17,
-  control: 17,
-  // metaKey
-  '⌘': 91,
-  cmd: 91,
-  command: 91,
-};
-
-export const getKeyCode = (x: string): number =>
-  // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-  keyNameCodeMapping[x.toLowerCase()] ||
-  // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-  modifierNameKeyCodeMapping[x.toLowerCase()] ||
-  x.toUpperCase().charCodeAt(0);
diff --git a/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.spec.tsx b/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.spec.tsx
index 60c8b63cff0449..68bce41b0b822d 100644
--- a/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.spec.tsx
+++ b/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.spec.tsx
@@ -397,7 +397,10 @@ describe('useCopyIssueDetails', () => {
     });
 
     it('sets up hotkeys with the correct callbacks', () => {
-      const useHotkeysMock = jest.spyOn(require('sentry/utils/useHotkeys'), 'useHotkeys');
+      const useHotkeysMock = jest.spyOn(
+        require('@sentry/scraps/hotkey/useHotkeys'),
+        'useHotkeys'
+      );
 
       renderHook(() => useCopyIssueDetails(group, event));
 
diff --git a/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.tsx b/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.tsx
index dae69e00bc5aa9..5da561ea15cfd3 100644
--- a/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.tsx
+++ b/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.tsx
@@ -1,5 +1,7 @@
 import {useCallback, useMemo, useSyncExternalStore} from 'react';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
+
 import type {AutofixData} from 'sentry/components/events/autofix/types';
 import {useAutofixData} from 'sentry/components/events/autofix/useAutofix';
 import {
@@ -17,7 +19,6 @@ import type {Group} from 'sentry/types/group';
 import type {StacktraceType} from 'sentry/types/stacktrace';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useCopyToClipboard} from 'sentry/utils/useCopyToClipboard';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 // Simple store for active thread ID from the UI with subscription support
diff --git a/static/app/views/navigation/index.desktop.spec.tsx b/static/app/views/navigation/index.desktop.spec.tsx
index c667f7efb7861a..9753ff54febea8 100644
--- a/static/app/views/navigation/index.desktop.spec.tsx
+++ b/static/app/views/navigation/index.desktop.spec.tsx
@@ -15,7 +15,6 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import {ConfigStore} from 'sentry/stores/configStore';
-import {getKeyCode} from 'sentry/utils/getKeyCode';
 import {Navigation} from 'sentry/views/navigation';
 import {NAVIGATION_SIDEBAR_COLLAPSED_LOCAL_STORAGE_KEY} from 'sentry/views/navigation/constants';
 import {PrimaryNavigationContextProvider} from 'sentry/views/navigation/primaryNavigationContext';
@@ -626,7 +625,7 @@ describe('desktop navigation', () => {
           navigationContext()
         );
 
-        fireEvent.keyDown(document, {keyCode: getKeyCode('b'), ctrlKey: true});
+        fireEvent.keyDown(document, {keyCode: 66 /* b */, ctrlKey: true});
 
         expect(screen.getByTestId('collapsed-secondary-sidebar')).toBeInTheDocument();
       });
@@ -639,10 +638,10 @@ describe('desktop navigation', () => {
           navigationContext()
         );
 
-        fireEvent.keyDown(document, {keyCode: getKeyCode('b'), ctrlKey: true});
+        fireEvent.keyDown(document, {keyCode: 66 /* b */, ctrlKey: true});
         expect(screen.getByTestId('collapsed-secondary-sidebar')).toBeInTheDocument();
 
-        fireEvent.keyDown(document, {keyCode: getKeyCode('b'), ctrlKey: true});
+        fireEvent.keyDown(document, {keyCode: 66 /* b */, ctrlKey: true});
         expect(
           screen.queryByTestId('collapsed-secondary-sidebar')
         ).not.toBeInTheDocument();
diff --git a/static/app/views/navigation/index.tsx b/static/app/views/navigation/index.tsx
index 227daf0fe88e06..30e423e7794410 100644
--- a/static/app/views/navigation/index.tsx
+++ b/static/app/views/navigation/index.tsx
@@ -1,6 +1,7 @@
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {Container, Flex} from '@sentry/scraps/layout';
 import {ExternalLink} from '@sentry/scraps/link';
 
@@ -8,7 +9,6 @@ import {CommandPaletteHotkeys} from 'sentry/components/commandPalette/ui/command
 import {useGlobalCommandPaletteActions} from 'sentry/components/commandPalette/useGlobalCommandPaletteActions';
 import {useGlobalModal} from 'sentry/components/globalModal/useGlobalModal';
 import {t} from 'sentry/locale';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {
   MobileNavigation,
diff --git a/static/app/views/seerExplorer/explorerPanel.tsx b/static/app/views/seerExplorer/explorerPanel.tsx
index a0d96c89fabaa1..3c8292be995e53 100644
--- a/static/app/views/seerExplorer/explorerPanel.tsx
+++ b/static/app/views/seerExplorer/explorerPanel.tsx
@@ -1,15 +1,16 @@
 import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
 import {useTheme} from '@emotion/react';
+import styled from '@emotion/styled';
 import {AnimatePresence, motion} from 'framer-motion';
 
 import {Button} from '@sentry/scraps/button';
+import {Hotkey} from '@sentry/scraps/hotkey';
 import {Container} from '@sentry/scraps/layout';
 import {Flex} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
-import {HotkeysLabel} from 'sentry/components/hotkeysLabel';
 import {IconSeer} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {User} from 'sentry/types/user';
@@ -818,24 +819,28 @@ function SeerFloatingActionButton(props: SeerFloatingActionButtonProps) {
           right={theme.space.lg}
           style={{zIndex: theme.zIndex.sidebarPanel}}
         >
-          <MotionButton
+          <SeerButton
             initial={{opacity: 0, scale: 0.9, y: 20}}
             animate={{opacity: 1, scale: 1, y: 0}}
             exit={{opacity: 0, scale: 0.9, y: 20}}
             transition={{duration: 0.2, ease: [0.4, 0, 0.2, 1]}}
             size="sm"
             {...rest}
+            icon={<IconSeer />}
           >
             <Flex align="center" gap="sm">
-              <IconSeer size="sm" />
               <Text size="sm">{t('Ask Seer')}</Text>
-              <Text size="xs" variant="muted">
-                <HotkeysLabel value={['command+/', 'ctrl+/']} />
-              </Text>
+              <Hotkey variant="debossed" value="command+/" />
             </Flex>
-          </MotionButton>
+          </SeerButton>
         </Container>
       )}
     </AnimatePresence>
   );
 }
+
+const SeerButton = styled(MotionButton)`
+  & > span:last-child {
+    overflow: visible;
+  }
+`;
diff --git a/static/app/views/seerExplorer/useExplorerPanel.tsx b/static/app/views/seerExplorer/useExplorerPanel.tsx
index 954e983ac27b5f..55188a248f1b17 100644
--- a/static/app/views/seerExplorer/useExplorerPanel.tsx
+++ b/static/app/views/seerExplorer/useExplorerPanel.tsx
@@ -7,8 +7,9 @@ import {
   type ReactNode,
 } from 'react';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
+
 import {useGlobalModal} from 'sentry/components/globalModal/useGlobalModal';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 
 type ExplorerPanelContextValue = {
   closeExplorerPanel: () => void;
diff --git a/static/app/views/settings/components/settingsSearch/index.tsx b/static/app/views/settings/components/settingsSearch/index.tsx
index 5a15a1a851cbed..6fa6b87b63dc4b 100644
--- a/static/app/views/settings/components/settingsSearch/index.tsx
+++ b/static/app/views/settings/components/settingsSearch/index.tsx
@@ -1,12 +1,12 @@
 import {useRef} from 'react';
 import styled from '@emotion/styled';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {InputGroup} from '@sentry/scraps/input';
 
 import {Search} from 'sentry/components/search';
 import {IconSearch} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 
 const MIN_SEARCH_LENGTH = 1;
 const MAX_RESULTS = 10;