diff --git a/canon-website/app/playground/page.tsx b/canon-website/app/playground/page.tsx
index fcd8866770..c23f454630 100644
--- a/canon-website/app/playground/page.tsx
+++ b/canon-website/app/playground/page.tsx
@@ -1,7 +1,9 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { Grid, Stack, Text } from '@backstage/canon';
+import { Grid } from '../../../packages/canon/src/components/Grid';
+import { Stack } from '../../../packages/canon/src/components/Stack';
+import { Text } from '../../../packages/canon/src/components/Text';
 import { screenSizes } from '@/utils/data';
 import { Frame } from '@/components/Frame';
 import { usePlayground } from '@/utils/playground-context';
diff --git a/canon-website/app/providers.tsx b/canon-website/app/providers.tsx
index 508d40b7df..fdf544a037 100644
--- a/canon-website/app/providers.tsx
+++ b/canon-website/app/providers.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { CanonProvider } from '@backstage/canon';
+import { CanonProvider } from '../../packages/canon/src/contexts/canon';
 import { PlaygroundProvider } from '@/utils/playground-context';
 
 export const Providers = ({ children }: { children: ReactNode }) => {
diff --git a/canon-website/catalog-info.yaml b/canon-website/catalog-info.yaml
deleted file mode 100644
index bcbbcfb442..0000000000
--- a/canon-website/catalog-info.yaml
+++ /dev/null
@@ -1,9 +0,0 @@
-apiVersion: backstage.io/v1alpha1
-kind: Component
-metadata:
-  name: canon-website
-  title: canon-website
-spec:
-  lifecycle: experimental
-  type: backstage-web-library
-  owner: maintainers
diff --git a/canon-website/components/CodeBlock/index.tsx b/canon-website/components/CodeBlock/index.tsx
index 723608fadb..8e5d1f9e35 100644
--- a/canon-website/components/CodeBlock/index.tsx
+++ b/canon-website/components/CodeBlock/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { BundledLanguage } from 'shiki';
 import { codeToHtml } from 'shiki';
-import { Text } from '@backstage/canon';
+import { Text } from '../../../packages/canon/src/components/Text';
 import styles from './styles.module.css';
 
 interface CodeBlockProps {
diff --git a/canon-website/components/Frame/index.tsx b/canon-website/components/Frame/index.tsx
index 6f11ea1665..7dc898a76d 100644
--- a/canon-website/components/Frame/index.tsx
+++ b/canon-website/components/Frame/index.tsx
@@ -2,8 +2,8 @@
 
 import { useEffect, useState } from 'react';
 import ReactFrame from 'react-frame-component';
-import '@backstage/canon/src/css/core.css';
-import '@backstage/canon/src/css/components.css';
+import '../../../packages/canon/src/css/core.css';
+import '../../../packages/canon/src/css/components.css';
 
 export const Frame = ({ children }: { children: React.ReactNode }) => {
   const [show, setShow] = useState(false);
diff --git a/canon-website/components/HeadlessBanners/BaseUI.tsx b/canon-website/components/HeadlessBanners/BaseUI.tsx
index 28620d997d..b84be08dd6 100644
--- a/canon-website/components/HeadlessBanners/BaseUI.tsx
+++ b/canon-website/components/HeadlessBanners/BaseUI.tsx
@@ -1,5 +1,6 @@
 import styles from './styles.module.css';
-import { Text, Icon } from '@backstage/canon';
+import { Text } from '../../../packages/canon/src/components/Text';
+import { Icon } from '../../../packages/canon/src/components/Icon';
 
 interface BaseUIProps {
   href: string;
diff --git a/canon-website/components/IconLibrary/IconLibrary.tsx b/canon-website/components/IconLibrary/IconLibrary.tsx
index 71b63c0544..5d0daf302a 100644
--- a/canon-website/components/IconLibrary/IconLibrary.tsx
+++ b/canon-website/components/IconLibrary/IconLibrary.tsx
@@ -15,9 +15,10 @@
  */
 
 import React from 'react';
-import { Icon } from '@backstage/canon';
-import type { IconNames } from '@backstage/canon';
-import { icons, Text } from '@backstage/canon';
+import { Icon } from '../../../packages/canon/src/components/Icon';
+import type { IconNames } from '../../../packages/canon/src/components/Icon';
+import { Text } from '../../../packages/canon/src/components/Text';
+import { icons } from '../../../packages/canon/src/components/Icon/icons';
 import styles from './styles.module.css';
 
 export const IconLibrary = () => {
diff --git a/canon-website/components/Sidebar/docs.tsx b/canon-website/components/Sidebar/docs.tsx
index 2dea964d64..b592b675b1 100644
--- a/canon-website/components/Sidebar/docs.tsx
+++ b/canon-website/components/Sidebar/docs.tsx
@@ -2,7 +2,8 @@
 
 import Link from 'next/link';
 import { components, overview, layoutComponents, theme } from '@/utils/data';
-import { Box, Text } from '@backstage/canon';
+import { Box } from '../../../packages/canon/src/components/Box';
+import { Text } from '../../../packages/canon/src/components/Text';
 import { motion } from 'framer-motion';
 import styles from './Sidebar.module.css';
 import { usePathname } from 'next/navigation';
diff --git a/canon-website/components/Sidebar/playground.tsx b/canon-website/components/Sidebar/playground.tsx
index 5e784c7235..26c9109370 100644
--- a/canon-website/components/Sidebar/playground.tsx
+++ b/canon-website/components/Sidebar/playground.tsx
@@ -1,7 +1,9 @@
 'use client';
 
 import { components } from '@/utils/data';
-import { Box, Checkbox, Text } from '@backstage/canon';
+import { Box } from '../../../packages/canon/src/components/Box';
+import { Checkbox } from '../../../packages/canon/src/components/Checkbox';
+import { Text } from '../../../packages/canon/src/components/Text';
 import { motion } from 'framer-motion';
 import styles from './Sidebar.module.css';
 import { usePathname } from 'next/navigation';
diff --git a/canon-website/components/Sidebar/tabs.tsx b/canon-website/components/Sidebar/tabs.tsx
index cb9b46c1fd..c6bde4fc9e 100644
--- a/canon-website/components/Sidebar/tabs.tsx
+++ b/canon-website/components/Sidebar/tabs.tsx
@@ -2,7 +2,8 @@
 
 import styles from './Tabs.module.css';
 import { Tabs } from '@base-ui-components/react/tabs';
-import { Icon, Text } from '@backstage/canon';
+import { Icon } from '../../../packages/canon/src/components/Icon';
+import { Text } from '../../../packages/canon/src/components/Text';
 import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/navigation';
 import { setThemeCookie, setThemeNameCookie } from './actions';
diff --git a/canon-website/components/Snippet/index.tsx b/canon-website/components/Snippet/index.tsx
index 63273e4c87..aeab16298f 100644
--- a/canon-website/components/Snippet/index.tsx
+++ b/canon-website/components/Snippet/index.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { CodeBlock } from '../CodeBlock';
-import { Text } from '@backstage/canon';
+import { Text } from '../../../packages/canon/src/components/Text';
 import { Collapsible } from '@base-ui-components/react/collapsible';
 import styles from './styles.module.css';
 
diff --git a/canon-website/components/Tabs/parts.tsx b/canon-website/components/Tabs/parts.tsx
index 4205e971ea..02c4d23abd 100644
--- a/canon-website/components/Tabs/parts.tsx
+++ b/canon-website/components/Tabs/parts.tsx
@@ -2,7 +2,7 @@
 
 import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
 import styles from './styles.module.css';
-import { Text } from '@backstage/canon';
+import { Text } from '../../../packages/canon/src/components/Text';
 
 export const Root = ({
   className,
diff --git a/canon-website/mdx-components.tsx b/canon-website/mdx-components.tsx
index f17aa0750a..a72521e541 100644
--- a/canon-website/mdx-components.tsx
+++ b/canon-website/mdx-components.tsx
@@ -3,7 +3,9 @@ import Image, { ImageProps } from 'next/image';
 import { ReactNode, ReactElement } from 'react';
 import React from 'react';
 import { CodeBlock } from '@/components/CodeBlock';
-import { Heading, Text, Box } from '@backstage/canon';
+import { Heading } from '../packages/canon/src/components/Heading';
+import { Text } from '../packages/canon/src/components/Text';
+import { Box } from '../packages/canon/src/components/Box';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
diff --git a/canon-website/package.json b/canon-website/package.json
index 28a397962b..3e70a7531f 100644
--- a/canon-website/package.json
+++ b/canon-website/package.json
@@ -1,9 +1,6 @@
 {
   "name": "canon-website",
   "version": "0.0.0",
-  "backstage": {
-    "role": "web-library"
-  },
   "private": true,
   "repository": {
     "type": "git",
@@ -20,7 +17,6 @@
     "watch-css": "node scripts/watch-css.js"
   },
   "dependencies": {
-    "@backstage/canon": "workspace:^",
     "@base-ui-components/react": "^1.0.0-alpha.4",
     "@iframe-resizer/react": "^5.3.2",
     "@mdx-js/loader": "^3.1.0",
@@ -46,16 +42,5 @@
     "lightningcss": "^1.28.2",
     "shiki": "^1.24.4",
     "typescript": "^5"
-  },
-  "peerDependencies": {
-    "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
-  },
-  "peerDependenciesMeta": {
-    "@types/react": {
-      "optional": true
-    }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 0cae7c6995..6d03c28cc6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3821,7 +3821,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@backstage/canon@workspace:^, @backstage/canon@workspace:packages/canon":
+"@backstage/canon@workspace:packages/canon":
   version: 0.0.0-use.local
   resolution: "@backstage/canon@workspace:packages/canon"
   dependencies:
@@ -25055,7 +25055,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "canon-website@workspace:canon-website"
   dependencies:
-    "@backstage/canon": "workspace:^"
     "@base-ui-components/react": ^1.0.0-alpha.4
     "@eslint/eslintrc": ^3
     "@iframe-resizer/react": ^5.3.2
@@ -25079,14 +25078,6 @@ __metadata:
     react-frame-component: ^5.2.7
     shiki: ^1.24.4
     typescript: ^5
-  peerDependencies:
-    "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
-    react: ^16.13.1 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0
-    react-router-dom: 6.0.0-beta.0 || ^6.3.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
   languageName: unknown
   linkType: soft