diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 45109a5193..4f0a9e1641 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -28,7 +28,7 @@ Changelog
  * Add ability to define a custom `get_field_clean_name` method when defining `FormField` models that extend `AbstractFormField` (LB (Ben) Johnston)
  * Migrate Home (Dashboard) view to use generic Wagtail class based view (LB (Ben) Johnston)
  * Combine most of Wagtail’s stylesheets into the global `core.css` file (Thibaud Colas)
- * Add new Breadcrumbs to the Wagtail pattern library (Paarth Agarwal)
+ * Add new Breadcrumbs and Tabs to the Wagtail pattern library (Paarth Agarwal)
  * Adopt new Page Editor UI tabs in the workflow history report page (Paarth Agarwal)
  * Update `ReportView` to extend from generic `wagtail.admin.views.generic.models.IndexView` (Sage Abdullah)
  * Fix: Typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)
diff --git a/docs/releases/4.0.md b/docs/releases/4.0.md
index 9a1465ab30..ee676c5535 100644
--- a/docs/releases/4.0.md
+++ b/docs/releases/4.0.md
@@ -37,7 +37,7 @@ When using a queryset to render a list of images, you can now use the ``prefetch
  * Add ability to define a custom `get_field_clean_name` method when defining `FormField` models that extend `AbstractFormField` (LB (Ben) Johnston)
  * Migrate Home (Dashboard) view to use generic Wagtail class based view (LB (Ben) Johnston)
  * Combine most of Wagtail’s stylesheets into the global `core.css` file (Thibaud Colas)
- * Add new Breadcrumbs to the Wagtail pattern library (Paarth Agarwal)
+ * Add new Breadcrumbs and Tabs to the Wagtail pattern library (Paarth Agarwal)
  * Adopt new Page Editor UI tabs in the workflow history report page (Paarth Agarwal)
  * Update `ReportView` to extend from generic `wagtail.admin.views.generic.models.IndexView` (Sage Abdullah)
 
diff --git a/wagtail/admin/templates/wagtailadmin/panels/tabbed_interface.stories.tsx b/wagtail/admin/templates/wagtailadmin/panels/tabbed_interface.stories.tsx
new file mode 100644
index 0000000000..689cceea75
--- /dev/null
+++ b/wagtail/admin/templates/wagtailadmin/panels/tabbed_interface.stories.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Pattern, generateDocs } from 'storybook-django/src/react';
+import { initTabs } from '../../../../../client/src/includes/tabs';
+import template from './tabbed_interface.html';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initTabs();
+});
+
+const { docs, argTypes } = generateDocs(template);
+
+export default {
+  title: 'Shared / Tabs / TabbedInterface',
+  parameters: { docs },
+  argTypes: { ...argTypes },
+};
+
+const Template = (args) => <Pattern filename={__filename} context={args} />;
+
+export const Base = Template.bind({});
+
+Base.args = {
+  self: {
+    visible_children: [
+      {
+        heading: 'Content',
+        render_as_object: `<h2>Content</h2><div>Content Body</div>`,
+      },
+      {
+        heading: 'Promote',
+        render_as_object: `<h2>Promote</h2><div>Promote Body</div>`,
+      },
+      {
+        heading: 'Settings',
+        render_as_object: `<h2>Settings</h2><div>Settings Body</div>`,
+      },
+    ],
+  },
+};
+
+export const Single = Template.bind({});
+
+Single.args = {
+  self: {
+    visible_children: [
+      {
+        heading: 'Tab1',
+        render_as_object: `<h2>Title1</h2><div>Body Text</div>`,
+      },
+    ],
+  },
+};
+
+export const Multiple = Template.bind({});
+
+Multiple.args = {
+  self: {
+    visible_children: [
+      {
+        heading: 'Tab1',
+        render_as_object: `<h1>Title 1</h1><div>Body Text</div>`,
+      },
+      {
+        heading: 'Tab2',
+        render_as_object: `<h1>Title 2</h1><div>Body Text</div>`,
+      },
+      {
+        heading: 'Tab3',
+        render_as_object: `<h1>Title 3</h1><div>Body Text</div>`,
+      },
+      {
+        heading: 'Tab4',
+        render_as_object: `<h1>Title 4</h1><div>Body Text</div>`,
+      },
+      {
+        heading: 'Tab5',
+        render_as_object: `<h1>Title 5</h1><div>Body Text</div>`,
+      },
+    ],
+  },
+};
diff --git a/wagtail/admin/templates/wagtailadmin/shared/tabs/tab_nav_link.stories.tsx b/wagtail/admin/templates/wagtailadmin/shared/tabs/tab_nav_link.stories.tsx
new file mode 100644
index 0000000000..15f96831d6
--- /dev/null
+++ b/wagtail/admin/templates/wagtailadmin/shared/tabs/tab_nav_link.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Pattern, generateDocs } from 'storybook-django/src/react';
+
+import template from './tab_nav_link.html';
+
+const { docs, argTypes } = generateDocs(template);
+
+export default {
+  title: 'Shared / Tabs / TabsNavLink',
+  parameters: { docs },
+  argTypes: { ...argTypes },
+};
+
+const Template = (args) => <Pattern filename={__filename} context={args} />;
+
+export const Base = Template.bind({});
+
+Base.args = {
+  tab_id: 'tasks',
+  title: 'Tasks',
+};
+
+export const Errors = Template.bind({});
+
+Errors.args = {
+  tab_id: 'content',
+  title: 'Content',
+  errors_count: 35,
+};
diff --git a/wagtail/test/settings_ui.py b/wagtail/test/settings_ui.py
index 0d764b758f..12bf4849c3 100644
--- a/wagtail/test/settings_ui.py
+++ b/wagtail/test/settings_ui.py
@@ -15,7 +15,7 @@ PATTERN_LIBRARY = {
     # Groups of templates for the pattern library navigation. The keys
     # are the group titles and the values are lists of template name prefixes that will
     # be searched to populate the groups.
-    "SECTIONS": (("components", ["wagtailadmin/shared"]),),
+    "SECTIONS": (("components", ["wagtailadmin/shared", "wagtailadmin/panels"]),),
     # Configure which files to detect as templates.
     "TEMPLATE_SUFFIX": ".html",
     "PATTERN_BASE_TEMPLATE_NAME": "",