diff --git a/.changeset/long-ends-shop.md b/.changeset/long-ends-shop.md
new file mode 100644
index 0000000000..f57c3ccdbd
--- /dev/null
+++ b/.changeset/long-ends-shop.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Add new Tabs component to Canon
diff --git a/canon-docs/src/app/(docs)/components/tabs/page.mdx b/canon-docs/src/app/(docs)/components/tabs/page.mdx
new file mode 100644
index 0000000000..478608d718
--- /dev/null
+++ b/canon-docs/src/app/(docs)/components/tabs/page.mdx
@@ -0,0 +1,92 @@
+import { PropsTable } from '@/components/PropsTable';
+import { TabsSnippet } from '@/snippets/stories-snippets';
+import { Snippet } from '@/components/Snippet';
+import { Tabs } from '@/components/Tabs';
+import { CodeBlock } from '@/components/CodeBlock';
+import {
+ tabsRootPropDefs,
+ tabsListPropDefs,
+ tabsTabPropDefs,
+ tabsPanelPropDefs,
+} from './props';
+import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
+
+# Tabs
+
+A component for toggling between related panels on the same page.
+
+}
+ code={`
+
+ Tab 1
+ Tab 2
+ Tab 3 With long title
+
+ Content for Tab 1
+ Content for Tab 2
+ Content for Tab 3
+ `}
+/>
+
+
+
+ Usage
+ Theming
+
+
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+ Content for Tab 1
+ Content for Tab 2
+ Content for Tab 3
+
+`}
+ />
+
+
+ We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
+ your brand. For additional flexibility, you can use the provided class names for each element listed below.
+ - `canon-TabsRoot`
+ - `canon-TabsList`
+ - `canon-TabsTab`
+ - `canon-TabsPanel`
+ - `canon-TabsIndicator`
+
+
+
+## API reference
+
+
+
+### Tabs.Root
+
+Groups the tabs and the corresponding panels. Renders a `
` element.
+
+
+
+### Tabs.List
+
+Groups the individual tab buttons. Renders a `
` element.
+
+
+
+### Tabs.Tab
+
+An individual interactive tab button that toggles the corresponding panel. Renders a `