diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx
index c5eec1870b..11cc53b148 100644
--- a/packages/canon/src/components/Box/Docs.mdx
+++ b/packages/canon/src/components/Box/Docs.mdx
@@ -17,7 +17,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
 </Text>
 
 <Title type="h2">Installation</Title>
-<Source code={`yarn install @backstage/canon/box`} language="bash" dark />
+<Source code={`import { Box } from "@backstage/canon";`} language="tsx" dark />
 
 <Title type="h2">API reference</Title>
 
diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx
index 68090dac3e..733dbae637 100644
--- a/packages/canon/src/components/Container/Docs.mdx
+++ b/packages/canon/src/components/Container/Docs.mdx
@@ -17,7 +17,11 @@ import { containerProperties } from './sprinkles.css';
 </Text>
 
 <Title type="h2">Installation</Title>
-<Source code={`yarn install @backstage/canon/container`} language="bash" dark />
+<Source
+  code={`import { Container } from "@backstage/canon";`}
+  language="tsx"
+  dark
+/>
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference
diff --git a/packages/canon/src/components/Grid/Docs.mdx b/packages/canon/src/components/Grid/Docs.mdx
index 97c8dbbfb9..4a3d64d06f 100644
--- a/packages/canon/src/components/Grid/Docs.mdx
+++ b/packages/canon/src/components/Grid/Docs.mdx
@@ -15,7 +15,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
 </Text>
 
 <Title type="h2">Installation</Title>
-<Source code={`yarn install @backstage/canon/grid`} language="bash" dark />
+<Source code={`import { Grid } from "@backstage/canon";`} language="tsx" dark />
 
 <Title type="h2">Anatomy</Title>
 <Text>
diff --git a/packages/canon/src/components/Inline/Docs.mdx b/packages/canon/src/components/Inline/Docs.mdx
index fb4e664b42..0469ff0860 100644
--- a/packages/canon/src/components/Inline/Docs.mdx
+++ b/packages/canon/src/components/Inline/Docs.mdx
@@ -18,7 +18,11 @@ import { inlineProperties } from './sprinkles.css';
 </Text>
 
 <Title type="h2">Installation</Title>
-<Source code={`yarn install @backstage/canon/inline`} language="bash" dark />
+<Source
+  code={`import { Inline } from "@backstage/canon";`}
+  language="tsx"
+  dark
+/>
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference
diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx
index 62fd06cc62..5ec864937b 100644
--- a/packages/canon/src/components/Stack/Docs.mdx
+++ b/packages/canon/src/components/Stack/Docs.mdx
@@ -17,7 +17,11 @@ import { spacingProperties } from '../../layout/sprinkles.css';
 </Text>
 
 <Title type="h2">Installation</Title>
-<Source code={`yarn install @backstage/canon/stack`} language="bash" dark />
+<Source
+  code={`import { Stack } from "@backstage/canon";`}
+  language="tsx"
+  dark
+/>
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference