diff --git a/apps/pie-docs/src/components/assistive-text/code/code.md b/apps/pie-docs/src/components/assistive-text/code/code.md
index 8914393255..177e45a84f 100644
--- a/apps/pie-docs/src/components/assistive-text/code/code.md
+++ b/apps/pie-docs/src/components/assistive-text/code/code.md
@@ -104,16 +104,6 @@ import { PieAssistiveText } from '@justeattakeaway/pie-webc/react/assistive-text
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text/dist/react';
-
-
- Your request has been submitted.
-
-```
-
## Changelog
{% notification {
diff --git a/apps/pie-docs/src/components/button/code/code.md b/apps/pie-docs/src/components/button/code/code.md
index f24eb4acdb..9cb7d8b451 100644
--- a/apps/pie-docs/src/components/button/code/code.md
+++ b/apps/pie-docs/src/components/button/code/code.md
@@ -144,13 +144,6 @@ import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
increment
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieButton } from '@justeattakeaway/pie-button/dist/react';
-
-increment
-```
-
{% notification {
type: "neutral",
iconName: "link",
diff --git a/apps/pie-docs/src/components/card/code/code.md b/apps/pie-docs/src/components/card/code/code.md
index 21ba960e42..eeb0780ffd 100644
--- a/apps/pie-docs/src/components/card/code/code.md
+++ b/apps/pie-docs/src/components/card/code/code.md
@@ -98,15 +98,6 @@ import { PieCard } from '@justeattakeaway/pie-webc/react/card.js';
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieCard } from '@justeattakeaway/pie-card/dist/react';
-
-
- Take me to example.com!
-
-```
-
{% notification {
type: "neutral",
iconName: "link",
diff --git a/apps/pie-docs/src/components/checkbox-group/code/code.md b/apps/pie-docs/src/components/checkbox-group/code/code.md
index e578cda925..569d34fef4 100644
--- a/apps/pie-docs/src/components/checkbox-group/code/code.md
+++ b/apps/pie-docs/src/components/checkbox-group/code/code.md
@@ -115,18 +115,6 @@ import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js';
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieCheckboxGroup } from '@justeattakeaway/pie-checkbox-group/dist/react';
-import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react';
-
-
- Checkbox Label 1
- Checkbox Label 2
- Checkbox Label 3
-
-```
-
## Forms Usage
Please use the [form label](/components/form-label/) component for adding a label to the Checkbox Group component.
diff --git a/apps/pie-docs/src/components/checkbox/code/code.md b/apps/pie-docs/src/components/checkbox/code/code.md
index 501bd7d5a1..effeaae802 100644
--- a/apps/pie-docs/src/components/checkbox/code/code.md
+++ b/apps/pie-docs/src/components/checkbox/code/code.md
@@ -105,13 +105,6 @@ import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js';
Label
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react';
-
-Label
-```
-
Examples with and without a label:
```jsx
diff --git a/apps/pie-docs/src/components/chip/code/code.md b/apps/pie-docs/src/components/chip/code/code.md
index 91de1a4ceb..561ec48291 100644
--- a/apps/pie-docs/src/components/chip/code/code.md
+++ b/apps/pie-docs/src/components/chip/code/code.md
@@ -119,13 +119,6 @@ import { PieChip } from '@justeattakeaway/pie-webc/react/chip.js';
String
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieChip } from '@justeattakeaway/pie-chip/dist/react';
-
-String
-```
-
{% notification {
type: "neutral",
iconName: "link",
diff --git a/apps/pie-docs/src/components/divider/code/code.md b/apps/pie-docs/src/components/divider/code/code.md
index 69374e62e9..0598576eb5 100644
--- a/apps/pie-docs/src/components/divider/code/code.md
+++ b/apps/pie-docs/src/components/divider/code/code.md
@@ -86,13 +86,6 @@ import { PieDivider } from '@justeattakeaway/pie-webc/react/divider.js';
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieDivider } from '@justeattakeaway/pie-divider/dist/react';
-
-
-```
-
{% notification {
type: "neutral",
iconName: "link",
diff --git a/apps/pie-docs/src/components/icon-button/code/code.md b/apps/pie-docs/src/components/icon-button/code/code.md
index 9c80f16aa3..e2473b42b4 100644
--- a/apps/pie-docs/src/components/icon-button/code/code.md
+++ b/apps/pie-docs/src/components/icon-button/code/code.md
@@ -126,16 +126,6 @@ import { IconClose } from '@justeattakeaway/pie-icons-webc/dist/react/IconClose.
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
-import { IconClose } from '@justeattakeaway/pie-icons-webc/dist/react/IconClose';
-
-
-
-
-```
-
{% notification {
type: "neutral",
iconName: "link",
diff --git a/apps/pie-docs/src/components/link/code/code.md b/apps/pie-docs/src/components/link/code/code.md
index 1266bde321..d7c13970f5 100644
--- a/apps/pie-docs/src/components/link/code/code.md
+++ b/apps/pie-docs/src/components/link/code/code.md
@@ -112,13 +112,6 @@ import { PieLink } from '@justeattakeaway/pie-webc/react/link.js';
pie.design
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieLink } from '@justeattakeaway/pie-link/dist/react';
-
-pie.design
-```
-
{% notification {
type: "neutral",
iconName: "link",
diff --git a/apps/pie-docs/src/components/modal/code/code.md b/apps/pie-docs/src/components/modal/code/code.md
index 44b5df6ed7..0ad91c235e 100644
--- a/apps/pie-docs/src/components/modal/code/code.md
+++ b/apps/pie-docs/src/components/modal/code/code.md
@@ -106,13 +106,6 @@ import { PieModal } from '@justeattakeaway/pie-webc/react/modal.js';
Click me!
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
-
-Click me!
-```
-
{% notification {
type: "neutral",
iconName: "link",
diff --git a/apps/pie-docs/src/components/notification/code/code.md b/apps/pie-docs/src/components/notification/code/code.md
index faa698ccf7..67c163a2e2 100644
--- a/apps/pie-docs/src/components/notification/code/code.md
+++ b/apps/pie-docs/src/components/notification/code/code.md
@@ -121,13 +121,6 @@ import { PieNotification } from '@justeattakeaway/pie-webc/react/notification.js
Content
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieNotification } from '@justeattakeaway/pie-notification/dist/react';
-
-Content
-```
-
{% notification {
type: "neutral",
iconName: "link",
diff --git a/apps/pie-docs/src/components/switch/code/code.md b/apps/pie-docs/src/components/switch/code/code.md
index e665c62879..9c7488ddd3 100644
--- a/apps/pie-docs/src/components/switch/code/code.md
+++ b/apps/pie-docs/src/components/switch/code/code.md
@@ -123,13 +123,6 @@ import { PieSwitch } from '@justeattakeaway/pie-webc/react/switch.js';
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieSwitch } from '@justeattakeaway/pie-switch/dist/react';
-
-
-```
-
{% notification {
type: "neutral",
iconName: "link",
diff --git a/apps/pie-docs/src/components/tag/code/code.md b/apps/pie-docs/src/components/tag/code/code.md
index 1755dae809..9219b25cce 100644
--- a/apps/pie-docs/src/components/tag/code/code.md
+++ b/apps/pie-docs/src/components/tag/code/code.md
@@ -114,13 +114,6 @@ import { PieTag } from '@justeattakeaway/pie-webc/react/tag.js';
Label
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieTag } from '@justeattakeaway/pie-tag/dist/react';
-
-Label
-```
-
{% notification {
type: "neutral",
iconName: "link",
diff --git a/apps/pie-docs/src/components/text-input/code/code.md b/apps/pie-docs/src/components/text-input/code/code.md
index b65342c0be..a28b0c722e 100644
--- a/apps/pie-docs/src/components/text-input/code/code.md
+++ b/apps/pie-docs/src/components/text-input/code/code.md
@@ -117,25 +117,6 @@ import { PieTextInput } from '@justeattakeaway/pie-webc/react/text-input.js';
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieTextInput } from '@justeattakeaway/pie-text-input/dist/react';
-
-
-
-```
-
## Types
The text input accepts various values for the `type` property, allowing control over input behaviour. These are mostly standard HTML input types. For most use cases, the default type of `text` will suffice. It is important to note that setting the type to `number` does not guarantee the prevention of non-numeric characters being entered. This behaviour, which is consistent with native HTML inputs, allows some non-numeric characters such as `e`,`+`, `-`, and `.`.
diff --git a/apps/pie-docs/src/components/textarea/code/code.md b/apps/pie-docs/src/components/textarea/code/code.md
index a1fef99ba1..1ca9f23435 100644
--- a/apps/pie-docs/src/components/textarea/code/code.md
+++ b/apps/pie-docs/src/components/textarea/code/code.md
@@ -95,20 +95,6 @@ import { PieTextarea } from '@justeattakeaway/pie-webc/react/textarea.js';
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react';
-
-
-
-```
-
## Forms usage
{% notification {
type: "information",
diff --git a/apps/pie-docs/src/components/toast/code/code.md b/apps/pie-docs/src/components/toast/code/code.md
index e3b6bc9f42..55dd04d35b 100644
--- a/apps/pie-docs/src/components/toast/code/code.md
+++ b/apps/pie-docs/src/components/toast/code/code.md
@@ -102,13 +102,6 @@ import { PieToast } from '@justeattakeaway/pie-webc/react/toast.js';
```
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieToast } from '@justeattakeaway/pie-toast/dist/react';
-
-
-```
-
{% notification {
type: "neutral",
iconName: "link",
diff --git a/apps/pie-docs/src/engineers/getting-started/structure.md b/apps/pie-docs/src/engineers/getting-started/structure.md
index f140a8d9bb..7d7ae3ba11 100644
--- a/apps/pie-docs/src/engineers/getting-started/structure.md
+++ b/apps/pie-docs/src/engineers/getting-started/structure.md
@@ -11,11 +11,12 @@ shouldShowContents: true
Currently, JET has several officially supported component systems that implement PIE.
-- [Fozzie](https://vue.pie.design/) – a set of **Vue components** created by the legacy Just Eat web team
+- [PIE Web Components](https://webc.pie.design/) – Our flagship **web component library**, designed to work seamlessly with any tech stack.
- [Snacks](https://snacks.takeaway.com/) – a set of **React components** created by the legacy Takeaway design system team
+- [Fozzie](https://vue.pie.design/) – a set of **Vue components** created by the legacy Just Eat web team
- [Skip PIE Project](https://react.pie.design/) – a set of **React components** created by the Skip web team
-We are also currently building the [PIE Web Component System](https://webc.pie.design/). The long-term aim will be to migrate JET teams over to this Web Component System, so we have **one single source of truth** for our global PIE components.
+The long-term aim is to migrate JET teams over to this Web Component System, so we have **one single source of truth** for our global PIE components.
For more details on Fozzie, Snacks and Skip PIE, please check out the **documentation portals** linked above.
@@ -80,7 +81,7 @@ For more details on Fozzie, Snacks and Skip PIE, please check out the **document
If you are working with latest stack both in React and Vue ecosystems, we recommend to go straight away with
[PIE Web Components](/engineers/web-components/).
-### Next 13 and earlier versions
+### Next 13 and earlier versions
{% contentLayout %}
{% tag {
@@ -92,8 +93,8 @@ If you are working with latest stack both in React and Vue ecosystems, we recomm
variant: "blue"
} %}
{% endcontentLayout %}
-
-You can use [PIE Web Components](/engineers/web-components/) for Next 13 or earlier versions if you don't need SSR.
+
+You can use [PIE Web Components](/engineers/web-components/) for Next 13 or earlier versions if you don't need SSR.
If you need to render components on the server (SSR), [Snacks](https://snacks.takeaway.com/portal/) is the best library for you.
We recommend updating to Next 14 if you would like to use SSR with our new Web Components.
diff --git a/apps/pie-docs/src/engineers/web-components/overview.md b/apps/pie-docs/src/engineers/web-components/overview.md
index d8e9bb0c1a..f99ecbce64 100644
--- a/apps/pie-docs/src/engineers/web-components/overview.md
+++ b/apps/pie-docs/src/engineers/web-components/overview.md
@@ -12,15 +12,12 @@ permalink: engineers/web-components/
Currently, this technology is supported by all browsers, making it possible to have one central library that will work with most frontend frameworks.
-The long-term aim will be to migrate JET teams over to this Web Component System, so we have one single source of truth for our global PIE components.
+The long-term aim is to migrate JET teams over to this Web Component system, so we have one single source of truth for our global PIE components.
----
-
-## Component status
-
-You can find the documentation for all of our components on this site in the **Components** section.
-
-For a list of which components are supported in each of our libraries, please refer to the [Component Status page](/components/component-status/).
+{% notification {
+ type: "information",
+ message: "Our web components can be used via the [@justeattakeaway/pie-webc](https://npmjs.com/package/@justeattakeaway/pie-webc) library. Individual component packages are also available, but we advise sticking to the single entry point."
+} %}
___
@@ -44,8 +41,17 @@ More guides coming soon! 🚀
___
+## Component status
+
+You can find the documentation for all of our components on this site in the **Components** section.
+
+For a list of which components are supported in each of our libraries, please refer to the [Component Status page](/components/component-status/).
+
+---
+
## Usage
The following guides are meant to support you while using our web components.
+### Forms
For information about form elements and how to handle form data and validation, check out our [Form Usage Guide](https://github.com/justeattakeaway/pie/wiki/Form-Controls#pie-forms-usage).
diff --git a/apps/pie-docs/src/patterns/cookie-banner/code/code.md b/apps/pie-docs/src/patterns/cookie-banner/code/code.md
index dd36d0a73e..18236b8216 100644
--- a/apps/pie-docs/src/patterns/cookie-banner/code/code.md
+++ b/apps/pie-docs/src/patterns/cookie-banner/code/code.md
@@ -145,7 +145,7 @@ Use of locales in Vue:
Default preferences can be configured and passed to the component:
```jsx
-// React templates (using Next 13)
+// React templates
import { PieCookieBanner } from "@justeattakeaway/pie-cookie-banner/dist/react";
const defaultPreferences= {functional: true, personalized: true, analytical: true}