diff --git a/plugins/shortcuts/README.md b/plugins/shortcuts/README.md
index 36bd9e62f8..162afe009b 100644
--- a/plugins/shortcuts/README.md
+++ b/plugins/shortcuts/README.md
@@ -19,16 +19,18 @@ export { shortcutsPlugin } from '@backstage/plugin-shortcuts';
 
 Add the `<Shortcuts />` component within your `<Sidebar>`:
 
-```ts
+```tsx
 import { Sidebar, SidebarDivider, SidebarSpace } from '@backstage/core';
 import { Shortcuts } from '@backstage/plugin-shortcuts';
 
-<Sidebar>
-  {/* ... */}
-  <SidebarDivider />
-  <Shortcuts />
-  <SidebarSpace />
-</Sidebar>;
+export const SidebarComponent = () => (
+  <Sidebar>
+    {/* ... */}
+    <SidebarDivider />
+    <Shortcuts />
+    <SidebarSpace />
+  </Sidebar>
+);
 ```
 
 The plugin exports a `shortcutApiRef` but the plugin includes a default implementation of the `ShortcutApi` that uses `localStorage` to store each user's shortcuts.