diff --git a/docs/_components/example/_example.scss b/docs/_components/example/_example.scss
new file mode 100644
index 0000000..f7361d8
--- /dev/null
+++ b/docs/_components/example/_example.scss
@@ -0,0 +1,25 @@
+.app-example__frame {
+ background: govuk-colour("white");
+ border: 0;
+ border-right: 1px solid $govuk-border-colour;
+ display: block;
+ max-width: 100%;
+ width: 100%;
+}
+
+.app-example__tabs {
+ .govuk-tabs__panel#preview {
+ padding: 0;
+ padding-right: 1px;
+ }
+}
+
+.app-example__toolbar {
+ background: $govuk-body-background-colour;
+ border-top: 1px solid $govuk-border-colour;
+ padding: govuk-spacing(2);
+}
+
+.app-example__new-window {
+ @include govuk-font($size: 16);
+}
diff --git a/docs/_components/example/macro.njk b/docs/_components/example/macro.njk
new file mode 100644
index 0000000..cc0aedf
--- /dev/null
+++ b/docs/_components/example/macro.njk
@@ -0,0 +1,3 @@
+{% macro appExample(params) %}
+ {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/docs/_components/example/template.njk b/docs/_components/example/template.njk
new file mode 100644
index 0000000..d935546
--- /dev/null
+++ b/docs/_components/example/template.njk
@@ -0,0 +1,32 @@
+{% from "govuk/components/tabs/macro.njk" import govukTabs %}
+
+{%- set nunjucksHtml %}
+
+```js
+{{ getNunjucksCode(params.component) }}
+```
+{% endset %}
+
+{%- set previewHtml -%}
+
+
+ Open this example in a new tab
+
+{%- endset %}
+
+{{ govukTabs({
+ classes: "app-example__tabs",
+ items: [{
+ label: "Preview",
+ id: "preview",
+ panel: {
+ html: previewHtml
+ }
+ }, {
+ label: "Nunjucks",
+ id: "nunjucks",
+ panel: {
+ html: nunjucksHtml
+ }
+ }]
+}) }}
diff --git a/docs/autocomplete.md b/docs/autocomplete.md
index 657aed3..1ed7cd3 100644
--- a/docs/autocomplete.md
+++ b/docs/autocomplete.md
@@ -3,14 +3,14 @@ title: Autocomplete
layout: sub-navigation
order: 1
---
-{% from "x-govuk/components/autocomplete/macro.njk" import xGovukAutocomplete %}
-{% from "components/_example.njk" import example %}
The autocomplete component implements the [Accessible autocomplete pattern](https://github.com/alphagov/accessible-autocomplete) to enhance a fixed list of options provided by a `