diff --git a/docs/source/conf.py b/docs/source/conf.py
index b60d6eabac..6360e35dae 100644
--- a/docs/source/conf.py
+++ b/docs/source/conf.py
@@ -91,10 +91,11 @@
     # Ignore github.com pages with anchors
     r"https://github.com/.*#.*",
     # Ignore other specific anchors
-    r"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors#Identifying_the_issue",
-    r"https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-version-10-0",
     r"https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi",  # TODO retest with latest Sphinx when upgrading theme. chromewebstore recently changed its URL and has "too many redirects".
     r"https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd",  # TODO retest with latest Sphinx when upgrading theme. chromewebstore recently changed its URL and has "too many redirects".
+    r"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors#Identifying_the_issue",
+    r"https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-version-10-0",
+    r"https://stackoverflow.com",  # volto and documentation  # TODO retest with latest Sphinx.
 ]
 linkcheck_anchors = True
 linkcheck_timeout = 10
diff --git a/docs/source/configuration/index.md b/docs/source/configuration/index.md
index fde6916ff3..3375c41f9c 100644
--- a/docs/source/configuration/index.md
+++ b/docs/source/configuration/index.md
@@ -26,4 +26,5 @@ workingcopy
 environmentvariables
 expanders
 locking
+slots
 ```
diff --git a/docs/source/configuration/slots.md b/docs/source/configuration/slots.md
new file mode 100644
index 0000000000..6c2c9701e5
--- /dev/null
+++ b/docs/source/configuration/slots.md
@@ -0,0 +1,412 @@
+---
+myst:
+  html_meta:
+    "description": "Slots are insertion points in the Volto rendering tree structure."
+    "property=og:description": "Slots are insertion points in the Volto rendering tree structure."
+    "property=og:title": "Slots"
+    "keywords": "Volto, Plone, frontend, React, configuration, slots, viewlets"
+---
+
+# Slots
+
+Slots provide a way for Volto add-ons to insert their own components at predefined locations in the rendered page.
+
+```{note}
+This concept is inspired by the Plone Classic UI {doc}`plone:classic-ui/viewlets`.
+```
+
+
+## Anatomy
+
+Slots have a name, and they contain a list of named slot components.
+
+Volto renders slots using the `SlotRenderer` component.
+You can add slot insertion points in your code, as shown in the following example.
+
+```ts
+<SlotRenderer name="aboveContent" content={content} />
+```
+
+Slot components are registered in the {ref}`configuration registry using a specific API for slots <configuration-registry-for-slot-components>`.
+
+The rendering of a slot component is controlled by the presence or absence of a list of conditions called {term}`predicates`.
+
+You can register multiple slot components with the same name under the same slot, as long as they have different predicates or components.
+
+To illustrate how slots are structured and work, let's register a slot component, where the component is `PageHeader`, and the predicate matches a route that begins with `/de/about`.
+
+```ts
+config.registerSlotComponent({
+  slot: 'aboveContent',
+  name: 'header',
+  component: PageHeader,
+  predicates: [RouteCondition('/de/about')],
+});
+```
+
+The following tree structure diagram illustrates the resultant registration.
+
+```text
+Slot (`name`=`aboveContent`)
+└── SlotComponent
+    ├── `slot`=`aboveContent`
+    ├── `name`=`header`
+    ├── `component`=PageHeader
+    └── predicate of "only appear under `/de/about`"
+```
+
+Next, let's register another slot component in the same slot, with the same name and component, but with a different predicate where the content type matches either `Document` or `News Item`.
+
+```ts
+config.registerSlotComponent({
+  slot: 'aboveContent',
+  name: 'header',
+  component: PageHeader,
+  predicates: [ContentTypeCondition(['Document', 'News Item'])],
+});
+```
+
+The following tree structure diagram illustrates the result of the second registration.
+
+```text
+Slot (`name`=`aboveContent`)
+├── SlotComponent
+│   ├── `slot`=`aboveContent`
+│   ├── `name`=`header`
+│   ├── `component`=PageHeader
+│   └── predicate of "only appear under `/de/about`"
+└── SlotComponent
+    ├── `slot`=`aboveContent`
+    ├── `name`=`header`
+    ├── `component`=PageHeader
+    └── predicate of "only appear when the content type is either a Document or News Item"
+```
+
+Finally, let's register another slot component in the same slot, with the same name, but with a different component and without a predicate.
+
+```ts
+config.registerSlotComponent({
+  slot: 'aboveContent',
+  name: 'header',
+  component: 'DefaultHeader',
+});
+```
+
+The following tree structure diagram illustrates the result of the third registration.
+
+```text
+Slot (`name`=`aboveContent`)
+├── SlotComponent
+│   ├── `slot`=`aboveContent`
+│   ├── `name`=`header`
+│   ├── `component`=PageHeader
+│   └── predicate of "only appear under `/de/about`"
+├── SlotComponent
+│   ├── `slot`=`aboveContent`
+│   ├── `name`=`header`
+│   ├── `component`=PageHeader
+│   └── predicate of "only appear when the content type is either a Document or News Item"
+└── SlotComponent
+    ├── `slot`=`aboveContent`
+    ├── `name`=`header`
+    └── `component`=`DefaultHeader`
+```
+
+The rendering of slot components follows an algorithm:
+
+-   The last registered slot component is evaluated first.
+-   The first evaluated slot component's predicates to return `true` has its component rendered in the slot.
+-   A slot component without predicates becomes the fallback for other slot components with predicates.
+
+Working through the above diagram from bottom to top, let's assume a visitor goes to the route `/de/about` and views an Event content type.
+
+1.  The algorithm looks for the third slot component's predicates.
+    Because it has no predicates to be evaluated, and therefore cannot return `true`, its component is a fallback to other slot components.
+
+2.  Moving upward, the second slot component's predicates are evaluated.
+    If they are `true`, then its component is rendered in the slot, and evaluation stops.
+    But in this case, the content type is an Event, thus it returns `false`, and evaluation continues upward.
+
+3.  The first slot component's predicates are evaluated.
+    In this case, they are true because the visitor is on the route `/de/about`.
+    Evaluation stops, and its component is rendered in the slot.
+
+Within a slot, slot components are grouped by their name.
+The order in which the grouped slot components are evaluated is governed by the order in which they are registered.
+
+Extending our previous example, let's register another slot component with a different name.
+
+```ts
+config.registerSlotComponent({
+  slot: 'aboveContent',
+  name: 'subheader',
+  component: PageSubHeader,
+  predicates: [ContentTypeCondition(['Document', 'News Item'])],
+});
+```
+
+Thus the order of evaluation of the named slot components would be `header`, `subheader`.
+As each group of slot components is evaluated, their predicates will determine what is rendered in their position.
+
+You can change the order of the named slot components for a different slot using the {ref}`slots-reorderSlotComponent-label` API.
+In our example, you can reorder the `subheading` before the `heading`, although it would probably look strange.
+
+```ts
+config.reorderSlotComponent({
+  slot: 'aboveContent',
+  name: 'subheader',
+  action: 'before',
+  target: 'header',
+});
+```
+
+You can even delete the rendering of a registered slot component using the {ref}`slots-unregisterSlotComponent-label` API.
+
+
+## Default slots
+
+Volto comes with the following default slots.
+
+-   `aboveContent`
+-   `belowContent`
+
+
+(configuration-registry-for-slot-components)=
+
+## Configuration registry for slot components
+
+You can manage slot components using the configuration registry for slot components and its API.
+
+
+### `registerSlotComponent`
+
+`registerSlotComponent` registers a slot component as shown.
+
+```ts
+config.registerSlotComponent({
+  slot: 'aboveContent',
+  name: 'header',
+  component: PageHeader,
+  predicates: [
+    RouteCondition('/de/about'),
+    ContentTypeCondition(['Document', 'News Item'])
+  ],
+});
+```
+
+A slot component must have the following parameters.
+
+`slot`
+:   The name of the slot, where the slot components are stored.
+
+`name`
+:   The name of the slot component that we are registering.
+
+`component`
+:   The component that we want to render in the slot.
+
+`predicates`
+:   A list of functions that return a function with this signature.
+
+    ```ts
+    export type SlotPredicate = (args: any) => boolean;
+    ```
+
+
+#### Predicate helpers
+
+There are two predicate helpers available in the Volto helpers.
+You can also create custom predicate helpers.
+
+
+##### `RouteCondition`
+
+```ts
+export function RouteCondition(path: string, exact?: boolean) {
+  return ({ pathname }: { pathname: string }) =>
+    Boolean(matchPath(pathname, { path, exact }));
+}
+```
+
+The `RouteCondition` predicate helper renders a slot if the specified route matches.
+It accepts the following parameters.
+
+`path`
+:   String.
+    Required.
+    The route.
+
+`exact`
+:   Boolean.
+    Optional.
+    If `true`, then the match will be exact, else matches "begins with", for the given string from `path`.
+
+
+##### `ContentTypeCondition`
+
+```ts
+export function ContentTypeCondition(contentType: string[]) {
+  return ({ content }: { content: Content }) =>
+    contentType.includes(content['@type']);
+}
+```
+
+The `ContentTypeCondition` helper predicate allows you to render a slot when the given content type matches the current content type.
+It accepts a list of possible content types.
+
+
+##### Custom predicates
+
+You can create your own predicate helpers to determine whether your slot component should render.
+The `SlotRenderer` will pass down the current `content` and the `pathname` into your custom predicate helper.
+You can also tailor your own `SlotRenderer`s, or shadow the original `SlotRenderer`, to satisfy your requirements.
+
+
+(slots-getSlot-label)=
+
+### `getSlot`
+
+`getSlot` returns the components to be rendered for the given named slot.
+You should use this method while building you own slot renderer or customizing the existing `SlotRenderer`.
+You can use the implementation of `SlotRenderer` as a template.
+This is the signature:
+
+```ts
+config.getSlot(name: string, args: GetSlotArgs): GetSlotReturn
+```
+
+It has the following parameters.
+
+`name`
+:   String.
+    Required.
+    The name of the slot we want to render.
+
+`args`
+:   Object.
+    Required.
+    An object containing the arguments to pass to the predicates.
+
+
+(slots-getSlotComponents-label)=
+
+### `getSlotComponents`
+
+`getSlotComponents` returns the list of named slot components registered in a given slot.
+This is useful to debug what is registered and in what order, informing you whether you need to change their order.
+This is the signature:
+
+```ts
+config.getSlotComponents(slot: string): string[]
+```
+
+`slot`
+:   String.
+    Required.
+    The name of the slot where the slot components are stored.
+
+
+(slots-getSlotComponent-label)=
+
+### `getSlotComponent`
+
+`getSlotComponent` returns the registered named component's data for the given slot component name.
+This is the signature:
+
+```ts
+config.getSlotComponent(slot: string, name: string): SlotComponent[]
+```
+
+`slot`
+:   String.
+    Required.
+    The name of the slot where the slot components are stored.
+
+`name`
+:   String.
+    Required.
+    The name of the slot component to retrieve.
+
+
+(slots-reorderSlotComponent-label)=
+
+### `reorderSlotComponent`
+
+`reorderSlotComponent` reorders the list of named slot components registered per slot.
+
+Given a `slot` and the `name` of a slot component, you must either specify the desired `position` or perform an `action` to reposition the slot component in the given slot, but not both.
+
+The available actions are `"after"`, `"before"`, `"first"`, and `"last"`.
+`"first"` and `"last"` do not accept a `target`.
+
+This is the signature:
+
+```ts
+config.reorderSlotComponent({ slot, name, position, action, target }: {
+  slot: string;
+  name: string;
+  position?: number | undefined;
+  action?: "after" | "before" | "first" | "last" | undefined;
+  target?: string | undefined;
+}): void
+```
+
+`slot`
+:   String.
+    Required.
+    The name of the slot where the slot components are stored.
+
+`name`
+:   String.
+    Required.
+    The name of the slot component to reposition in the list of slot components.
+
+`position`
+:   Number.
+    Exactly one of `position` or `action` is required.
+    The destination position in the registered list of slot components.
+    The position is zero-indexed.
+
+`action`
+:   Enum: `"after"` | `"before"` | `"first"` | `"last"` | undefined.
+    Exactly one of `position` or `action` is required.
+    The action to perform on `name`.
+
+    When using either the `"after"` or `"before"` values, a `target` is required.
+    The slot component will be repositioned relative to the `target`.
+
+    When using either the `"first"` and `"last"` values, a `target` must not be used.
+    The slot component will be repositioned to either the first or last position.
+
+`target`
+:   String.
+    Required when `action` is either `"after"` or `"before"`, else must not be provided.
+    The name of the slot component targeted for the given `action`.
+
+
+(slots-unregisterSlotComponent-label)=
+
+### `unregisterSlotComponent`
+
+`unregisterSlotComponent` removes a registration for a named slot component, given its registration position.
+This is the signature:
+
+```ts
+config.unRegisterSlotComponent(slot: string, name: string, position: number): void
+```
+
+`slot`
+:   String.
+    Required.
+    The name of the slot that contains the slot component to unregister.
+
+`name`
+:   String.
+    Required.
+    The name of the slot component to unregister inside the component.
+
+`position`
+:   Number.
+    Required.
+    The component position to remove in the slot component registration.
+    Use {ref}`slots-getSlotComponent-label` to find the zero-indexed position of the registered component to remove.
diff --git a/packages/coresandbox/src/components/Slots/SlotTest.tsx b/packages/coresandbox/src/components/Slots/SlotTest.tsx
new file mode 100644
index 0000000000..66f095c552
--- /dev/null
+++ b/packages/coresandbox/src/components/Slots/SlotTest.tsx
@@ -0,0 +1,10 @@
+const SlotComponentTest = () => {
+  return (
+    <div style={{ margin: '0 auto 20px auto', width: '1127px' }}>
+      <h2>This is a test slot component</h2>
+      <p>It should appear above the Content</p>
+    </div>
+  );
+};
+
+export default SlotComponentTest;
diff --git a/packages/coresandbox/src/index.ts b/packages/coresandbox/src/index.ts
index 1f4527a27c..b5c04d775b 100644
--- a/packages/coresandbox/src/index.ts
+++ b/packages/coresandbox/src/index.ts
@@ -9,6 +9,9 @@ import { conditionalVariationsSchemaEnhancer } from './components/Blocks/schemaE
 import codeSVG from '@plone/volto/icons/code.svg';
 import type { BlockConfigBase } from '@plone/types';
 import type { ConfigType } from '@plone/registry';
+import SlotComponentTest from './components/Slots/SlotTest';
+import { ContentTypeCondition } from '@plone/volto/helpers';
+import { RouteCondition } from '@plone/volto/helpers/Slots';
 
 const testBlock: BlockConfigBase = {
   id: 'testBlock',
@@ -171,6 +174,13 @@ const applyConfig = (config: ConfigType) => {
   config.blocks.blocksConfig.listing = listing(config);
   config.views.contentTypesViews.Folder = NewsAndEvents;
 
+  config.registerSlotComponent({
+    slot: 'aboveContent',
+    name: 'testSlotComponent',
+    component: SlotComponentTest,
+    predicates: [ContentTypeCondition(['Document']), RouteCondition('/hello')],
+  });
+
   return config;
 };
 
diff --git a/packages/registry/news/5775.feature b/packages/registry/news/5775.feature
new file mode 100644
index 0000000000..d3b2b6f4be
--- /dev/null
+++ b/packages/registry/news/5775.feature
@@ -0,0 +1 @@
+Support for slots @tiberiuichim @sneridagh
diff --git a/packages/registry/package.json b/packages/registry/package.json
index c8a2fa1c1f..83351c88c2 100644
--- a/packages/registry/package.json
+++ b/packages/registry/package.json
@@ -50,7 +50,7 @@
   },
   "scripts": {
     "watch": "parcel watch",
-    "build": "parcel build",
+    "build": "parcel build --no-cache",
     "test": "vitest",
     "dry-release": "release-it --dry-run",
     "release": "release-it",
diff --git a/packages/registry/src/index.ts b/packages/registry/src/index.ts
index dc81917a15..56740160ed 100644
--- a/packages/registry/src/index.ts
+++ b/packages/registry/src/index.ts
@@ -5,6 +5,10 @@ import type {
   ComponentsConfig,
   ExperimentalConfig,
   SettingsConfig,
+  GetSlotArgs,
+  GetSlotReturn,
+  SlotComponent,
+  SlotPredicate,
   SlotsConfig,
   ViewsConfig,
   WidgetsConfig,
@@ -125,7 +129,7 @@ class Config {
   }
 
   getComponent(
-    options: { name: string; dependencies: string[] | string } | string,
+    options: { name: string; dependencies?: string[] | string } | string,
   ): GetComponentResult {
     if (typeof options === 'object') {
       const { name, dependencies = '' } = options;
@@ -147,7 +151,7 @@ class Config {
 
   registerComponent(options: {
     name: string;
-    dependencies: string[] | string;
+    dependencies?: string[] | string;
     component: React.ComponentType;
   }) {
     const { name, component, dependencies = '' } = options;
@@ -181,6 +185,214 @@ class Config {
       }
     }
   }
+
+  getSlot(name: string, args: GetSlotArgs): GetSlotReturn {
+    if (!this._data.slots[name]) {
+      return;
+    }
+    const { slots, data } = this._data.slots[name];
+    const slotComponents = [];
+    // For all enabled slots
+    for (const slotName of slots) {
+      // For all registered components for that slot, inversed, since the last one registered wins
+      // TODO: Cover ZCA use case, where if more predicates, more specificity wins if all true.
+      // Let's keep it simple here and stick to the registered order.
+      let noPredicateComponent: SlotComponent | undefined;
+      const reversedSlotComponents = data[slotName].slice().reverse(); // Immutable reversed copy
+      for (const slotComponent of reversedSlotComponents) {
+        let isPredicateTrueFound: boolean = false;
+        if (slotComponent.predicates) {
+          isPredicateTrueFound = slotComponent.predicates.every((predicate) =>
+            predicate(args),
+          );
+        } else {
+          // We mark the one with no predicates
+          noPredicateComponent = slotComponent;
+        }
+
+        // If all the predicates are truthy
+        if (isPredicateTrueFound) {
+          slotComponents.push({
+            component: slotComponent.component,
+            name: slotName,
+          });
+          // We "reset" the marker, we already found a candidate
+          noPredicateComponent = undefined;
+          break;
+        }
+      }
+
+      if (noPredicateComponent) {
+        slotComponents.push({
+          component: noPredicateComponent.component,
+          name: slotName,
+        });
+      }
+    }
+
+    return slotComponents;
+  }
+
+  registerSlotComponent(options: {
+    slot: string;
+    name: string;
+    predicates?: SlotPredicate[];
+    component: SlotComponent['component'];
+  }): void {
+    const { name, component, predicates, slot } = options;
+
+    if (!component) {
+      throw new Error('No component provided');
+    }
+    if (!predicates) {
+      // Test if there's already one registered, we only support one
+      const hasRegisteredNoPredicatesComponent = this._data.slots?.[
+        slot
+      ]?.data?.[name]?.find(({ predicates }) => !predicates);
+      if (hasRegisteredNoPredicatesComponent) {
+        throw new Error(
+          `There is already registered a component ${name} for the slot ${slot}. You can only register one slot component with no predicates per slot.`,
+        );
+      }
+    }
+
+    let currentSlot = this._data.slots[slot];
+    if (!currentSlot) {
+      this._data.slots[slot] = {
+        slots: [],
+        data: {},
+      };
+      currentSlot = this._data.slots[slot];
+    }
+    if (!currentSlot.data[name]) {
+      currentSlot.data[name] = [];
+    }
+
+    const currentSlotComponents = currentSlot.data[name];
+    if (!currentSlot.slots.includes(name)) {
+      currentSlot.slots.push(name);
+    }
+    const slotComponentData = {
+      component,
+      predicates,
+    };
+
+    // Try to set a displayName (useful for React dev tools) for the registered component
+    // Only if it's a function and it's not set previously
+    try {
+      const displayName = slotComponentData.component.displayName;
+
+      if (!displayName && typeof slotComponentData?.component === 'function') {
+        slotComponentData.component.displayName = name;
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Not setting the slot component displayName because ${error}`,
+      );
+    }
+
+    currentSlotComponents.push(slotComponentData);
+  }
+
+  getSlotComponent(slot: string, name: string) {
+    const currentSlot = this._data.slots[slot];
+    if (!slot || !currentSlot) {
+      throw new Error(`No slot ${slot} found`);
+    }
+    const currentSlotComponents = currentSlot.data[name];
+    if (!currentSlotComponents) {
+      throw new Error(`No slot component ${name} in slot ${slot} found`);
+    }
+    return currentSlotComponents;
+  }
+
+  getSlotComponents(slot: string) {
+    const currentSlot = this._data.slots[slot];
+    if (!slot || !currentSlot) {
+      throw new Error(`No slot ${slot} found`);
+    }
+    return currentSlot.slots;
+  }
+
+  reorderSlotComponent({
+    slot,
+    name,
+    position,
+    action,
+    target,
+  }: {
+    slot: string;
+    name: string;
+    position?: number;
+    action?: 'after' | 'before' | 'first' | 'last';
+    target?: string;
+  }) {
+    if (!position && !action) {
+      throw new Error(`At least a position or action is required as argument`);
+    }
+    if (position && action) {
+      throw new Error(
+        `You should provide only one of position or action as arguments`,
+      );
+    }
+    if ((action == 'after' || action == 'before') && !target) {
+      throw new Error(
+        `No action target set. You should provide the name of a slot component as target when action is 'after' or 'before'.`,
+      );
+    }
+
+    const currentSlot = this._data.slots[slot];
+    if (!slot || !currentSlot) {
+      throw new Error(`No slot ${slot} found`);
+    }
+    const origin = currentSlot.slots.indexOf(name);
+    const result = Array.from(currentSlot.slots);
+    const [removed] = result.splice(origin, 1);
+
+    if (action) {
+      let targetIdx = 0;
+      if (target) {
+        targetIdx = currentSlot.slots.indexOf(target);
+      }
+      switch (action) {
+        case 'after':
+          result.splice(targetIdx, 0, removed);
+          break;
+        case 'before':
+          result.splice(targetIdx - 1, 0, removed);
+          break;
+        case 'last':
+          result.push(removed);
+          break;
+        case 'first':
+          result.unshift(removed);
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    if (position) {
+      result.splice(position, 0, removed);
+    }
+
+    currentSlot.slots = result;
+  }
+
+  unRegisterSlotComponent(slot: string, name: string, position: number) {
+    const currentSlot = this._data.slots[slot];
+    if (!slot || !currentSlot) {
+      throw new Error(`No slot ${slot} found`);
+    }
+    const currentSlotComponents = currentSlot.data[name];
+    if (!currentSlotComponents) {
+      throw new Error(`No slot component ${name} in slot ${slot} found`);
+    }
+    const result = currentSlotComponents.slice();
+    currentSlot.data[name] = result.splice(position, 1);
+  }
 }
 
 const instance = new Config();
diff --git a/packages/registry/src/registry.test.jsx b/packages/registry/src/registry.test.jsx
deleted file mode 100644
index 861d26701f..0000000000
--- a/packages/registry/src/registry.test.jsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import config from './index';
-import { describe, expect, it } from 'vitest';
-
-config.set('components', {
-  Toolbar: { component: 'this is the Toolbar component' },
-  'Toolbar.Types': { component: 'this is the Types component' },
-  'Teaser|News Item': { component: 'This is the News Item Teaser component' },
-});
-
-describe('registry', () => {
-  it('get components', () => {
-    expect(config.getComponent('Toolbar').component).toEqual(
-      'this is the Toolbar component',
-    );
-  });
-  it('get components with context', () => {
-    expect(
-      config.getComponent({ name: 'Teaser', dependencies: 'News Item' })
-        .component,
-    ).toEqual('This is the News Item Teaser component');
-  });
-  it('get components with dots (as an object)', () => {
-    expect(config.getComponent({ name: 'Toolbar.Types' }).component).toEqual(
-      'this is the Types component',
-    );
-  });
-  it('get components with | and spaces (as a string)', () => {
-    expect(config.getComponent('Teaser|News Item').component).toEqual(
-      'This is the News Item Teaser component',
-    );
-  });
-  it('resolves unexistent component (as a string)', () => {
-    expect(config.getComponent('Toolbar.Doh').component).toEqual(undefined);
-    expect(config.getComponent('Toolbar.Doh')).toEqual({});
-  });
-  it('registers and gets a component by name (as string)', () => {
-    config.registerComponent({
-      name: 'Toolbar.Bar',
-      component: 'this is a Bar component',
-    });
-    expect(config.getComponent('Toolbar.Bar').component).toEqual(
-      'this is a Bar component',
-    );
-  });
-  it('registers and gets a component by name (as an object)', () => {
-    config.registerComponent({
-      name: 'Toolbar.Bar',
-      component: 'this is a Bar component',
-    });
-    expect(config.getComponent({ name: 'Toolbar.Bar' }).component).toEqual(
-      'this is a Bar component',
-    );
-  });
-  it('registers and gets a component by name (as an object) - check displayName', () => {
-    config.registerComponent({
-      name: 'Toolbar.Bar',
-      component: () => <div>Hello</div>,
-    });
-    expect(config.getComponent('Toolbar.Bar').component.displayName).toEqual(
-      'Toolbar.Bar',
-    );
-  });
-  it('registers and gets a component by name (as an object) - check displayName if it has already one, it does not overwrite it', () => {
-    const TestComponent = () => <div>Hello</div>;
-    TestComponent.displayName = 'DisplayNameAlreadySet';
-    config.registerComponent({
-      name: 'Toolbar.Bar',
-      component: TestComponent,
-    });
-
-    expect(config.getComponent('Toolbar.Bar').component.displayName).toEqual(
-      'DisplayNameAlreadySet',
-    );
-  });
-  it('registers and gets a component by name (as an object) - check displayName - do not break if it is a normal function', () => {
-    function myFunction() {
-      return 'true';
-    }
-
-    config.registerComponent({
-      name: 'Toolbar.Bar',
-      component: myFunction,
-    });
-    expect(config.getComponent('Toolbar.Bar').component.displayName).toEqual(
-      'Toolbar.Bar',
-    );
-  });
-  it('registers a component by name with dependencies', () => {
-    config.registerComponent({
-      name: 'Toolbar.Bar',
-      component: 'this is a Bar component',
-      dependencies: 'News Item',
-    });
-    expect(
-      config.getComponent({ name: 'Toolbar.Bar', dependencies: 'News Item' })
-        .component,
-    ).toEqual('this is a Bar component');
-  });
-  it('registers a component by name with dependencies array', () => {
-    config.registerComponent({
-      name: 'Toolbar.Bar',
-      component: 'this is a Bar component',
-      dependencies: ['News Item', 'StringFieldWidget'],
-    });
-    expect(
-      config.getComponent({
-        name: 'Toolbar.Bar',
-        dependencies: ['News Item', 'StringFieldWidget'],
-      }).component,
-    ).toEqual('this is a Bar component');
-  });
-});
diff --git a/packages/registry/src/registry.test.tsx b/packages/registry/src/registry.test.tsx
new file mode 100644
index 0000000000..f5879bebe6
--- /dev/null
+++ b/packages/registry/src/registry.test.tsx
@@ -0,0 +1,736 @@
+import config from './index';
+import { describe, expect, it, afterEach } from 'vitest';
+
+config.set('components', {
+  Toolbar: { component: 'this is the Toolbar component' },
+  'Toolbar.Types': { component: 'this is the Types component' },
+  'Teaser|News Item': { component: 'This is the News Item Teaser component' },
+});
+
+config.set('slots', {});
+
+describe('Component registry', () => {
+  it('get components', () => {
+    expect(config.getComponent('Toolbar').component).toEqual(
+      'this is the Toolbar component',
+    );
+  });
+  it('get components with context', () => {
+    expect(
+      config.getComponent({ name: 'Teaser', dependencies: 'News Item' })
+        .component,
+    ).toEqual('This is the News Item Teaser component');
+  });
+  it('get components with dots (as an object)', () => {
+    expect(config.getComponent({ name: 'Toolbar.Types' }).component).toEqual(
+      'this is the Types component',
+    );
+  });
+  it('get components with | and spaces (as a string)', () => {
+    expect(config.getComponent('Teaser|News Item').component).toEqual(
+      'This is the News Item Teaser component',
+    );
+  });
+  it('resolves unexistent component (as a string)', () => {
+    expect(config.getComponent('Toolbar.Doh').component).toEqual(undefined);
+    expect(config.getComponent('Toolbar.Doh')).toEqual({});
+  });
+  it('registers and gets a component by name (as string)', () => {
+    config.registerComponent({
+      name: 'Toolbar.Bar',
+      component: 'this is a Bar component',
+    });
+    expect(config.getComponent('Toolbar.Bar').component).toEqual(
+      'this is a Bar component',
+    );
+  });
+  it('registers and gets a component by name (as an object)', () => {
+    config.registerComponent({
+      name: 'Toolbar.Bar',
+      component: 'this is a Bar component',
+    });
+    expect(config.getComponent({ name: 'Toolbar.Bar' }).component).toEqual(
+      'this is a Bar component',
+    );
+  });
+  it('registers and gets a component by name (as an object) - check displayName', () => {
+    config.registerComponent({
+      name: 'Toolbar.Bar',
+      component: () => <div>Hello</div>,
+    });
+    expect(config.getComponent('Toolbar.Bar').component.displayName).toEqual(
+      'Toolbar.Bar',
+    );
+  });
+  it('registers and gets a component by name (as an object) - check displayName if it has already one, it does not overwrite it', () => {
+    const TestComponent = () => <div>Hello</div>;
+    TestComponent.displayName = 'DisplayNameAlreadySet';
+    config.registerComponent({
+      name: 'Toolbar.Bar',
+      component: TestComponent,
+    });
+
+    expect(config.getComponent('Toolbar.Bar').component.displayName).toEqual(
+      'DisplayNameAlreadySet',
+    );
+  });
+  it('registers and gets a component by name (as an object) - check displayName - do not break if it is a normal function', () => {
+    function myFunction() {
+      return 'true';
+    }
+
+    config.registerComponent({
+      name: 'Toolbar.Bar',
+      component: myFunction,
+    });
+    expect(config.getComponent('Toolbar.Bar').component.displayName).toEqual(
+      'Toolbar.Bar',
+    );
+  });
+  it('registers a component by name with dependencies', () => {
+    config.registerComponent({
+      name: 'Toolbar.Bar',
+      component: 'this is a Bar component',
+      dependencies: 'News Item',
+    });
+    expect(
+      config.getComponent({ name: 'Toolbar.Bar', dependencies: 'News Item' })
+        .component,
+    ).toEqual('this is a Bar component');
+  });
+  it('registers a component by name with dependencies array', () => {
+    config.registerComponent({
+      name: 'Toolbar.Bar',
+      component: 'this is a Bar component',
+      dependencies: ['News Item', 'StringFieldWidget'],
+    });
+    expect(
+      config.getComponent({
+        name: 'Toolbar.Bar',
+        dependencies: ['News Item', 'StringFieldWidget'],
+      }).component,
+    ).toEqual('this is a Bar component');
+  });
+});
+
+describe('Slots registry', () => {
+  afterEach(() => {
+    config.set('slots', {});
+  });
+
+  // type Predicate = (predicateValues: unknown) = (predicateValues, args) => boolean
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const RouteConditionTrue = (route: string) => () => true;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const RouteConditionFalse = (route: string) => () => false;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const ContentTypeConditionTrue = (contentType: string[]) => () => true;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const ContentTypeConditionFalse = (contentType: string[]) => () => false;
+
+  it('registers a single slot component with no predicate', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with no predicate',
+    });
+
+    expect(config.getSlot('toolbar', {})![0].component).toEqual(
+      'this is a toolbar component with no predicate',
+    );
+  });
+
+  it('registers two slot components with predicates - registered components order is respected', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component:
+        'this is a toolbar component with only a truth-ish route condition',
+      predicates: [RouteConditionTrue('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a Bar component with a false predicate and one true',
+      predicates: [
+        RouteConditionFalse('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    expect(config.getSlot('toolbar', {})![0].component).toEqual(
+      'this is a toolbar component with only a truth-ish route condition',
+    );
+  });
+
+  it('registers two slot components with predicates - All registered components predicates are truthy, the last one registered wins', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component:
+        'this is a toolbar component with only a truth-ish route condition',
+      predicates: [RouteConditionTrue('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with two truth-ish predicates',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    expect(config.getSlot('toolbar', {})![0].component).toEqual(
+      'this is a toolbar component with two truth-ish predicates',
+    );
+  });
+
+  it('registers two slot components with predicates - No registered component have a truthy predicate', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with a false predicate',
+      predicates: [RouteConditionFalse('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with two false predicate',
+      predicates: [
+        RouteConditionFalse('/folder/path'),
+        ContentTypeConditionFalse(['News Item']),
+      ],
+    });
+
+    expect(config.getSlot('toolbar', {})).toEqual([]);
+  });
+
+  it('registers two slot components one without predicates - registered component with predicates are truthy, the last one registered wins', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with no predicate',
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with two truth-ish predicates',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    expect(config.getSlot('toolbar', {})![0].component).toEqual(
+      'this is a toolbar component with two truth-ish predicates',
+    );
+  });
+
+  it('registers two slot components one without predicates - registered components predicates are falsy, the one with no predicates wins', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with no predicate',
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with two truth-ish predicates',
+      predicates: [
+        RouteConditionFalse('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    expect(config.getSlot('toolbar', {})![0].component).toEqual(
+      'this is a toolbar component with no predicate',
+    );
+  });
+
+  it('registers two slot components one without predicates - registered components predicates are truthy, the one with predicates wins', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with two truth-ish predicates',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with no predicate',
+    });
+
+    expect(config.getSlot('toolbar', {})![0].component).toEqual(
+      'this is a toolbar component with two truth-ish predicates',
+    );
+  });
+
+  it('registers 2 + 2 slot components with predicates - No registered component have a truthy predicate', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with a false predicate',
+      predicates: [RouteConditionFalse('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with two false predicate',
+      predicates: [
+        RouteConditionFalse('/folder/path'),
+        ContentTypeConditionFalse(['News Item']),
+      ],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar component with a false predicate',
+      predicates: [RouteConditionFalse('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar component with two false predicate',
+      predicates: [
+        RouteConditionFalse('/folder/path'),
+        ContentTypeConditionFalse(['News Item']),
+      ],
+    });
+    expect(config.getSlot('toolbar', {})).toEqual([]);
+  });
+
+  it('registers 2 + 2 slot components with predicates - One truthy predicate per set', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar save component with a true predicate',
+      predicates: [RouteConditionTrue('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with two false predicate',
+      predicates: [
+        RouteConditionFalse('/folder/path'),
+        ContentTypeConditionFalse(['News Item']),
+      ],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar component with a false predicate',
+      predicates: [RouteConditionFalse('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+    expect(config.getSlot('toolbar', {})![0].component).toEqual(
+      'this is a toolbar save component with a true predicate',
+    );
+    expect(config.getSlot('toolbar', {})![1].component).toEqual(
+      'this is a toolbar edit component with true predicate',
+    );
+  });
+
+  it('getSlotComponents - registers 2 + 2 slot components with predicates', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar save component with a true predicate',
+      predicates: [RouteConditionTrue('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with two false predicate',
+      predicates: [
+        RouteConditionFalse('/folder/path'),
+        ContentTypeConditionFalse(['News Item']),
+      ],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar component with a false predicate',
+      predicates: [RouteConditionFalse('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+    expect(config.getSlotComponents('toolbar').length).toEqual(2);
+    expect(config.getSlotComponents('toolbar')).toEqual(['save', 'edit']);
+  });
+
+  it('getSlotComponent - registers 2 + 2 slot components with predicates', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar save component with a true predicate',
+      predicates: [RouteConditionTrue('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with two false predicate',
+      predicates: [
+        RouteConditionFalse('/folder/path'),
+        ContentTypeConditionFalse(['News Item']),
+      ],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar component with a false predicate',
+      predicates: [RouteConditionFalse('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+    expect(config.getSlotComponent('toolbar', 'save').length).toEqual(2);
+    expect(config.getSlotComponent('toolbar', 'save')[0].component).toEqual(
+      'this is a toolbar save component with a true predicate',
+    );
+  });
+
+  it('reorderSlotComponent - position', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar save component with a true predicate',
+      predicates: [RouteConditionTrue('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with two false predicate',
+      predicates: [
+        RouteConditionFalse('/folder/path'),
+        ContentTypeConditionFalse(['News Item']),
+      ],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar component with a false predicate',
+      predicates: [RouteConditionFalse('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+    expect(config.getSlotComponent('toolbar', 'save').length).toEqual(2);
+    expect(config.getSlotComponent('toolbar', 'save')[0].component).toEqual(
+      'this is a toolbar save component with a true predicate',
+    );
+    config.reorderSlotComponent({ slot: 'toolbar', name: 'save', position: 1 });
+    expect(config.getSlotComponents('toolbar')).toEqual(['edit', 'save']);
+  });
+
+  it('reorderSlotComponent - after', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar save component with a true predicate',
+      predicates: [RouteConditionTrue('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar component with a false predicate',
+      predicates: [RouteConditionFalse('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'cancel',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'bold',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    expect(config.getSlotComponents('toolbar')).toEqual([
+      'save',
+      'edit',
+      'cancel',
+      'bold',
+    ]);
+    config.reorderSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      action: 'after',
+      target: 'cancel',
+    });
+    expect(config.getSlotComponents('toolbar')).toEqual([
+      'edit',
+      'cancel',
+      'save',
+      'bold',
+    ]);
+  });
+
+  it('reorderSlotComponent - before', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar save component with a true predicate',
+      predicates: [RouteConditionTrue('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar component with a false predicate',
+      predicates: [RouteConditionFalse('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'cancel',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'bold',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    expect(config.getSlotComponents('toolbar')).toEqual([
+      'save',
+      'edit',
+      'cancel',
+      'bold',
+    ]);
+    config.reorderSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      action: 'before',
+      target: 'cancel',
+    });
+    expect(config.getSlotComponents('toolbar')).toEqual([
+      'edit',
+      'save',
+      'cancel',
+      'bold',
+    ]);
+  });
+
+  it('reorderSlotComponent - last', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar save component with a true predicate',
+      predicates: [RouteConditionTrue('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar component with a false predicate',
+      predicates: [RouteConditionFalse('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'cancel',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'bold',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    expect(config.getSlotComponents('toolbar')).toEqual([
+      'save',
+      'edit',
+      'cancel',
+      'bold',
+    ]);
+    config.reorderSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      action: 'last',
+    });
+    expect(config.getSlotComponents('toolbar')).toEqual([
+      'edit',
+      'cancel',
+      'bold',
+      'save',
+    ]);
+  });
+
+  it('reorderSlotComponent - first', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar save component with a true predicate',
+      predicates: [RouteConditionTrue('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar component with a false predicate',
+      predicates: [RouteConditionFalse('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'cancel',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'bold',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+
+    expect(config.getSlotComponents('toolbar')).toEqual([
+      'save',
+      'edit',
+      'cancel',
+      'bold',
+    ]);
+    config.reorderSlotComponent({
+      slot: 'toolbar',
+      name: 'bold',
+      action: 'first',
+    });
+    expect(config.getSlotComponents('toolbar')).toEqual([
+      'bold',
+      'save',
+      'edit',
+      'cancel',
+    ]);
+  });
+
+  it('unRegisterSlotComponent - registers 2 + 2 slot components with predicates', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar save component with a true predicate',
+      predicates: [RouteConditionTrue('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: 'this is a toolbar component with two false predicate',
+      predicates: [
+        RouteConditionFalse('/folder/path'),
+        ContentTypeConditionFalse(['News Item']),
+      ],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar component with a false predicate',
+      predicates: [RouteConditionFalse('/de')],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: 'this is a toolbar edit component with true predicate',
+      predicates: [
+        RouteConditionTrue('/folder/path'),
+        ContentTypeConditionTrue(['News Item']),
+      ],
+    });
+    expect(config.getSlotComponent('toolbar', 'save').length).toEqual(2);
+    expect(config.getSlotComponent('toolbar', 'save')[0].component).toEqual(
+      'this is a toolbar save component with a true predicate',
+    );
+    config.unRegisterSlotComponent('toolbar', 'save', 1);
+    expect(config.getSlotComponent('toolbar', 'save').length).toEqual(1);
+  });
+});
diff --git a/packages/types/news/5775.feature b/packages/types/news/5775.feature
new file mode 100644
index 0000000000..58fafd2629
--- /dev/null
+++ b/packages/types/news/5775.feature
@@ -0,0 +1 @@
+Support for slots @sneridagh
diff --git a/packages/types/src/config/Slots.d.ts b/packages/types/src/config/Slots.d.ts
new file mode 100644
index 0000000000..87952c3f7d
--- /dev/null
+++ b/packages/types/src/config/Slots.d.ts
@@ -0,0 +1,25 @@
+import type { Content } from '../content';
+
+export type SlotPredicate = (args: any) => boolean;
+
+export type GetSlotArgs = {
+  content: Content;
+  pathname: string;
+  navRoot?: Content;
+};
+
+export type GetSlotReturn =
+  | { component: SlotComponent['component']; name: string }[]
+  | undefined;
+
+export type SlotComponent = {
+  component: React.ComponentType<any>;
+  predicates?: SlotPredicate[];
+};
+
+export type SlotManager = {
+  slots: string[];
+  data: Record<string, SlotComponent[]>;
+};
+
+export type SlotsConfig = Record<string, SlotManager>;
diff --git a/packages/types/src/config/index.d.ts b/packages/types/src/config/index.d.ts
index 02df192e63..a62e18c96d 100644
--- a/packages/types/src/config/index.d.ts
+++ b/packages/types/src/config/index.d.ts
@@ -2,6 +2,7 @@ import type { SettingsConfig } from './Settings';
 import type { BlocksConfig } from './Blocks';
 import type { ViewsConfig } from './Views';
 import type { WidgetsConfig } from './Widgets';
+import type { SlotsConfig } from './Slots';
 
 export type AddonReducersConfig = Record<string, Function>;
 
@@ -11,8 +12,6 @@ export type AddonRoutesConfig = {
   component: React.ComponentType;
 }[];
 
-export type SlotsConfig = Record<string, unknown>;
-
 export type ComponentsConfig = Record<
   string,
   { component: React.ComponentType }
@@ -34,3 +33,4 @@ export type ConfigData = {
 
 export { SettingsConfig, BlocksConfig, ViewsConfig, WidgetsConfig };
 export * from './Blocks';
+export * from './Slots';
diff --git a/packages/types/src/content/common.d.ts b/packages/types/src/content/common.d.ts
index b1b91edf84..de8922c49f 100644
--- a/packages/types/src/content/common.d.ts
+++ b/packages/types/src/content/common.d.ts
@@ -2,6 +2,7 @@ import type { BreadcrumbsResponse } from '../services/breadcrumbs';
 import type { NavigationResponse } from '../services/navigation';
 import type { ActionsResponse } from '../services/actions';
 import type { GetTypesResponse } from '../services/types';
+import type { GetNavrootResponse } from '../services/navroot';
 import type { GetAliasesResponse } from '../services/aliases';
 import type { ContextNavigationResponse } from '../services/contextnavigation';
 import type { WorkflowResponse } from '../services/workflow';
@@ -13,6 +14,7 @@ export interface Expanders {
   breadcrumbs: BreadcrumbsResponse;
   contextnavigation: ContextNavigationResponse;
   navigation: NavigationResponse;
+  navroot: GetNavrootResponse;
   types: GetTypesResponse;
   workflow: WorkflowResponse;
 }
diff --git a/packages/volto/cypress/tests/coresandbox/slots.js b/packages/volto/cypress/tests/coresandbox/slots.js
new file mode 100644
index 0000000000..4d8abe6e48
--- /dev/null
+++ b/packages/volto/cypress/tests/coresandbox/slots.js
@@ -0,0 +1,43 @@
+context('Slots', () => {
+  describe('Block Default View / Edit', () => {
+    beforeEach(() => {
+      cy.intercept('GET', `/**/*?expand*`).as('content');
+      cy.intercept('GET', '/**/Document').as('schema');
+      // given a logged in editor and a page in edit mode
+      cy.autologin();
+      cy.createContent({
+        contentType: 'Document',
+        contentId: 'document',
+        contentTitle: 'Test document',
+      });
+      cy.createContent({
+        contentType: 'Document',
+        contentId: 'hello',
+        contentTitle: 'Test document Hello',
+      });
+
+      cy.visit('/');
+      cy.wait('@content');
+    });
+
+    it('[ContentTypeCondition(["Document"]), RouteCondition("/hello")] only renders when the predicates are true', function () {
+      cy.get('body').should(
+        'not.include.text',
+        'This is a test slot component',
+      );
+
+      cy.navigate('/document');
+      cy.wait('@content');
+
+      cy.get('body').should(
+        'not.include.text',
+        'This is a test slot component',
+      );
+
+      cy.navigate('/hello');
+      cy.wait('@content');
+
+      cy.get('body').should('include.text', 'This is a test slot component');
+    });
+  });
+});
diff --git a/packages/volto/news/5775.feature b/packages/volto/news/5775.feature
new file mode 100644
index 0000000000..58fafd2629
--- /dev/null
+++ b/packages/volto/news/5775.feature
@@ -0,0 +1 @@
+Support for slots @sneridagh
diff --git a/packages/volto/package.json b/packages/volto/package.json
index c202aaf0c6..3765fe3dda 100644
--- a/packages/volto/package.json
+++ b/packages/volto/package.json
@@ -189,6 +189,8 @@
     "@plone/registry": "workspace:*",
     "@plone/scripts": "workspace:*",
     "@plone/volto-slate": "workspace:*",
+    "@types/react": "^18.2.57",
+    "@types/react-dom": "^18.2.19",
     "autoprefixer": "10.4.8",
     "axe-core": "4.4.2",
     "babel-plugin-add-module-exports": "0.2.1",
@@ -365,8 +367,7 @@
     "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "^29.5.8",
     "@types/lodash": "^4.14.201",
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "18.0.1",
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "6.7.0",
diff --git a/packages/volto/src/components/manage/Form/Form.jsx b/packages/volto/src/components/manage/Form/Form.jsx
index 2e7c4ff4e6..6ffc4020b0 100644
--- a/packages/volto/src/components/manage/Form/Form.jsx
+++ b/packages/volto/src/components/manage/Form/Form.jsx
@@ -53,6 +53,7 @@ import {
 } from '@plone/volto/actions';
 import { compose } from 'redux';
 import config from '@plone/volto/registry';
+import SlotRenderer from '../../theme/SlotRenderer/SlotRenderer';
 
 /**
  * Form container class.
@@ -641,131 +642,147 @@ class Form extends Component {
       // Removing this from SSR is important, since react-beautiful-dnd supports SSR,
       // but draftJS don't like it much and the hydration gets messed up
       this.state.isClient && (
-        <Container>
-          <BlocksToolbar
-            formData={formData}
-            selectedBlock={this.state.selected}
-            selectedBlocks={this.state.multiSelected}
-            onChangeBlocks={(newBlockData) => {
-              const newFormData = {
-                ...formData,
-                ...newBlockData,
-              };
-              this.setState({
-                formData: newFormData,
-              });
-              if (this.props.global) {
-                this.props.setFormData(newFormData);
-              }
-            }}
-            onSetSelectedBlocks={(blockIds) =>
-              this.setState({ multiSelected: blockIds })
-            }
-            onSelectBlock={this.onSelectBlock}
-          />
-          <UndoToolbar
-            state={{
-              formData,
-              selected: this.state.selected,
-              multiSelected: this.state.multiSelected,
-            }}
-            enableHotKeys
-            onUndoRedo={({ state }) => {
-              if (this.props.global) {
-                this.props.setFormData(state.formData);
-              }
-              return this.setState(state);
-            }}
-          />
-          <BlocksForm
-            onChangeFormData={(newData) => {
-              const newFormData = {
-                ...formData,
-                ...newData,
-              };
-              this.setState({
-                formData: newFormData,
-              });
-              if (this.props.global) {
-                this.props.setFormData(newFormData);
-              }
-            }}
-            onChangeField={this.onChangeField}
-            onSelectBlock={this.onSelectBlock}
-            properties={formData}
+        <>
+          <SlotRenderer
+            name="aboveContent"
+            content={this.props.content}
             navRoot={navRoot}
-            type={type}
-            pathname={this.props.pathname}
-            selectedBlock={this.state.selected}
-            multiSelected={this.state.multiSelected}
-            manage={this.props.isAdminForm}
-            allowedBlocks={this.props.allowedBlocks}
-            showRestricted={this.props.showRestricted}
-            editable={this.props.editable}
-            isMainForm={this.props.editable}
           />
-          {this.state.isClient && this.props.editable && (
-            <Portal
-              node={__CLIENT__ && document.getElementById('sidebar-metadata')}
-            >
-              <UiForm
-                method="post"
-                onSubmit={this.onSubmit}
-                error={keys(this.state.errors).length > 0}
+
+          <Container>
+            <BlocksToolbar
+              formData={formData}
+              selectedBlock={this.state.selected}
+              selectedBlocks={this.state.multiSelected}
+              onChangeBlocks={(newBlockData) => {
+                const newFormData = {
+                  ...formData,
+                  ...newBlockData,
+                };
+                this.setState({
+                  formData: newFormData,
+                });
+                if (this.props.global) {
+                  this.props.setFormData(newFormData);
+                }
+              }}
+              onSetSelectedBlocks={(blockIds) =>
+                this.setState({ multiSelected: blockIds })
+              }
+              onSelectBlock={this.onSelectBlock}
+            />
+            <UndoToolbar
+              state={{
+                formData,
+                selected: this.state.selected,
+                multiSelected: this.state.multiSelected,
+              }}
+              enableHotKeys
+              onUndoRedo={({ state }) => {
+                if (this.props.global) {
+                  this.props.setFormData(state.formData);
+                }
+                return this.setState(state);
+              }}
+            />
+            <BlocksForm
+              onChangeFormData={(newData) => {
+                const newFormData = {
+                  ...formData,
+                  ...newData,
+                };
+                this.setState({
+                  formData: newFormData,
+                });
+                if (this.props.global) {
+                  this.props.setFormData(newFormData);
+                }
+              }}
+              onChangeField={this.onChangeField}
+              onSelectBlock={this.onSelectBlock}
+              properties={formData}
+              navRoot={navRoot}
+              type={type}
+              pathname={this.props.pathname}
+              selectedBlock={this.state.selected}
+              multiSelected={this.state.multiSelected}
+              manage={this.props.isAdminForm}
+              allowedBlocks={this.props.allowedBlocks}
+              showRestricted={this.props.showRestricted}
+              editable={this.props.editable}
+              isMainForm={this.props.editable}
+            />
+            {this.state.isClient && this.props.editable && (
+              <Portal
+                node={__CLIENT__ && document.getElementById('sidebar-metadata')}
               >
-                {schema &&
-                  map(schema.fieldsets, (fieldset) => (
-                    <Accordion
-                      fluid
-                      styled
-                      className="form"
-                      key={fieldset.title}
-                    >
-                      <div
-                        key={fieldset.id}
-                        id={`metadataform-fieldset-${fieldset.id}`}
+                <UiForm
+                  method="post"
+                  onSubmit={this.onSubmit}
+                  error={keys(this.state.errors).length > 0}
+                >
+                  {schema &&
+                    map(schema.fieldsets, (fieldset) => (
+                      <Accordion
+                        fluid
+                        styled
+                        className="form"
+                        key={fieldset.title}
                       >
-                        <Accordion.Title
-                          active={metadataFieldsets.includes(fieldset.id)}
-                          index={fieldset.id}
-                          onClick={this.onToggleMetadataFieldset}
-                        >
-                          {fieldset.title}
-                          {metadataFieldsets.includes(fieldset.id) ? (
-                            <Icon name={upSVG} size="20px" />
-                          ) : (
-                            <Icon name={downSVG} size="20px" />
-                          )}
-                        </Accordion.Title>
-                        <Accordion.Content
-                          active={metadataFieldsets.includes(fieldset.id)}
+                        <div
+                          key={fieldset.id}
+                          id={`metadataform-fieldset-${fieldset.id}`}
                         >
-                          <Segment className="attached">
-                            {map(fieldset.fields, (field, index) => (
-                              <Field
-                                {...schema.properties[field]}
-                                id={field}
-                                fieldSet={fieldset.title.toLowerCase()}
-                                formData={formData}
-                                focus={this.state.inFocus[field]}
-                                value={formData?.[field]}
-                                required={schema.required.indexOf(field) !== -1}
-                                onChange={this.onChangeField}
-                                onBlur={this.onBlurField}
-                                onClick={this.onClickInput}
-                                key={field}
-                                error={this.state.errors[field]}
-                              />
-                            ))}
-                          </Segment>
-                        </Accordion.Content>
-                      </div>
-                    </Accordion>
-                  ))}
-              </UiForm>
-            </Portal>
-          )}
-        </Container>
+                          <Accordion.Title
+                            active={metadataFieldsets.includes(fieldset.id)}
+                            index={fieldset.id}
+                            onClick={this.onToggleMetadataFieldset}
+                          >
+                            {fieldset.title}
+                            {metadataFieldsets.includes(fieldset.id) ? (
+                              <Icon name={upSVG} size="20px" />
+                            ) : (
+                              <Icon name={downSVG} size="20px" />
+                            )}
+                          </Accordion.Title>
+                          <Accordion.Content
+                            active={metadataFieldsets.includes(fieldset.id)}
+                          >
+                            <Segment className="attached">
+                              {map(fieldset.fields, (field, index) => (
+                                <Field
+                                  {...schema.properties[field]}
+                                  id={field}
+                                  fieldSet={fieldset.title.toLowerCase()}
+                                  formData={formData}
+                                  focus={this.state.inFocus[field]}
+                                  value={formData?.[field]}
+                                  required={
+                                    schema.required.indexOf(field) !== -1
+                                  }
+                                  onChange={this.onChangeField}
+                                  onBlur={this.onBlurField}
+                                  onClick={this.onClickInput}
+                                  key={field}
+                                  error={this.state.errors[field]}
+                                />
+                              ))}
+                            </Segment>
+                          </Accordion.Content>
+                        </div>
+                      </Accordion>
+                    ))}
+                </UiForm>
+              </Portal>
+            )}
+
+            <SlotRenderer
+              name="belowContent"
+              content={this.props.content}
+              navRoot={navRoot}
+            />
+          </Container>
+        </>
       )
     ) : (
       <Container>
@@ -931,6 +948,7 @@ const FormIntl = injectIntl(Form, { forwardRef: true });
 export default compose(
   connect(
     (state, props) => ({
+      content: state.content.data,
       globalData: state.form?.global,
       metadataFieldsets: state.sidebar?.metadataFieldsets,
       metadataFieldFocus: state.sidebar?.metadataFieldFocus,
diff --git a/packages/volto/src/components/manage/Form/Form.test.jsx b/packages/volto/src/components/manage/Form/Form.test.jsx
index 16e2362b65..1ac45f0e4d 100644
--- a/packages/volto/src/components/manage/Form/Form.test.jsx
+++ b/packages/volto/src/components/manage/Form/Form.test.jsx
@@ -18,6 +18,13 @@ describe('Form', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/manage/Preferences/ChangePassword.test.jsx b/packages/volto/src/components/manage/Preferences/ChangePassword.test.jsx
index 0df20b57de..48f71c5aa4 100644
--- a/packages/volto/src/components/manage/Preferences/ChangePassword.test.jsx
+++ b/packages/volto/src/components/manage/Preferences/ChangePassword.test.jsx
@@ -28,6 +28,13 @@ describe('ChangePassword', () => {
           loading: false,
         },
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/manage/Preferences/PersonalInformation.test.jsx b/packages/volto/src/components/manage/Preferences/PersonalInformation.test.jsx
index d08924a6d6..52eac28cee 100644
--- a/packages/volto/src/components/manage/Preferences/PersonalInformation.test.jsx
+++ b/packages/volto/src/components/manage/Preferences/PersonalInformation.test.jsx
@@ -42,6 +42,13 @@ describe('PersonalInformation', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -76,6 +83,13 @@ describe('PersonalInformation', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/manage/Preferences/PersonalPreferences.test.jsx b/packages/volto/src/components/manage/Preferences/PersonalPreferences.test.jsx
index 6d30297e6f..97ed07e951 100644
--- a/packages/volto/src/components/manage/Preferences/PersonalPreferences.test.jsx
+++ b/packages/volto/src/components/manage/Preferences/PersonalPreferences.test.jsx
@@ -31,6 +31,13 @@ describe('PersonalPreferences', () => {
           itemsTotal: 1,
         },
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const { container } = render(
       <Provider store={store}>
diff --git a/packages/volto/src/components/theme/Comments/Comments.test.jsx b/packages/volto/src/components/theme/Comments/Comments.test.jsx
index 3c05f87ada..1ea8663e7d 100644
--- a/packages/volto/src/components/theme/Comments/Comments.test.jsx
+++ b/packages/volto/src/components/theme/Comments/Comments.test.jsx
@@ -57,6 +57,13 @@ describe('Comments', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/theme/PasswordReset/PasswordReset.test.jsx b/packages/volto/src/components/theme/PasswordReset/PasswordReset.test.jsx
index 31401e2388..e5432c97b9 100644
--- a/packages/volto/src/components/theme/PasswordReset/PasswordReset.test.jsx
+++ b/packages/volto/src/components/theme/PasswordReset/PasswordReset.test.jsx
@@ -22,6 +22,13 @@ describe('PasswordReset', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx b/packages/volto/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx
index b1b085c371..47a0345881 100644
--- a/packages/volto/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx
+++ b/packages/volto/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx
@@ -22,6 +22,13 @@ describe('RequestPasswordReset', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/theme/Register/Register.test.jsx b/packages/volto/src/components/theme/Register/Register.test.jsx
index 6b288fc81d..f78c37ecbf 100644
--- a/packages/volto/src/components/theme/Register/Register.test.jsx
+++ b/packages/volto/src/components/theme/Register/Register.test.jsx
@@ -22,6 +22,13 @@ describe('Register', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/theme/SlotRenderer/SlotRenderer.test.jsx b/packages/volto/src/components/theme/SlotRenderer/SlotRenderer.test.jsx
new file mode 100644
index 0000000000..0f09535e5a
--- /dev/null
+++ b/packages/volto/src/components/theme/SlotRenderer/SlotRenderer.test.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import SlotRenderer from './SlotRenderer';
+import config from '@plone/volto/registry';
+
+describe('SlotRenderer Component', () => {
+  const RouteConditionTrue = () => () => true;
+  const RouteConditionFalse = () => () => false;
+  const ContentTypeConditionTrue = () => () => true;
+  const ContentTypeConditionFalse = () => () => false;
+
+  test('renders a SlotRenderer component for the aboveContentTitle with two slots in the root', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: (props) => <div className="slot-component-true" />,
+      predicates: [RouteConditionTrue()],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: (props) => <div className="slot-component-false" />,
+      predicates: [RouteConditionFalse(), ContentTypeConditionFalse()],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: (props) => <div className="slot-component-false" />,
+      predicates: [RouteConditionFalse()],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: (props) => (
+        <aside className="slot-component-true-predicates" />
+      ),
+      predicates: [RouteConditionTrue(), ContentTypeConditionTrue()],
+    });
+
+    const { container } = render(
+      <MemoryRouter initialEntries={[{ pathname: '/' }]}>
+        <SlotRenderer name="toolbar" content={{}} />
+      </MemoryRouter>,
+    );
+
+    const divSlot = container.querySelector('div');
+    expect(divSlot).toHaveClass('slot-component-true');
+    const asideSlot = container.querySelector('aside');
+    expect(asideSlot).toHaveClass('slot-component-true-predicates');
+  });
+});
diff --git a/packages/volto/src/components/theme/SlotRenderer/SlotRenderer.tsx b/packages/volto/src/components/theme/SlotRenderer/SlotRenderer.tsx
new file mode 100644
index 0000000000..01c38318ba
--- /dev/null
+++ b/packages/volto/src/components/theme/SlotRenderer/SlotRenderer.tsx
@@ -0,0 +1,54 @@
+import { useLocation } from 'react-router-dom';
+import config from '@plone/volto/registry';
+
+import type { Content } from '@plone/types';
+
+/*
+Usage:
+<SlotRenderer name="aboveContent" content={content} route={} />
+*/
+
+const SlotRenderer = ({
+  name,
+  content,
+  navRoot,
+}: {
+  name: string;
+  content: Content;
+  navRoot?: Content;
+}) => {
+  const pathname = useLocation().pathname;
+
+  let slots = config.getSlot(name, {
+    content,
+    pathname,
+    // This is to cover the use case while adding a new content and we don't have
+    // have the navRoot information in the initial content. This will be
+    // useful for SlotRenderers rendered in the `Add` route.
+    navRoot: content?.['@components']?.navroot?.navroot || navRoot || {},
+  });
+
+  if (!slots) {
+    return null;
+  }
+
+  return (
+    <>
+      {slots.map(
+        ({
+          component,
+          name,
+        }: {
+          component: React.ComponentType<any>;
+          name: string;
+        }) => {
+          // ^^ Weird compilation issue for Jest tests, that forced to re-declare the type above
+          const SlotComponent = component;
+          return <SlotComponent key={name} />;
+        },
+      )}
+    </>
+  );
+};
+
+export default SlotRenderer;
diff --git a/packages/volto/src/components/theme/View/View.jsx b/packages/volto/src/components/theme/View/View.jsx
index e836e452ab..ae9d97b53b 100644
--- a/packages/volto/src/components/theme/View/View.jsx
+++ b/packages/volto/src/components/theme/View/View.jsx
@@ -28,6 +28,7 @@ import {
 } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
+import SlotRenderer from '../SlotRenderer/SlotRenderer';
 
 /**
  * View container class.
@@ -244,6 +245,7 @@ class View extends Component {
               : null
           }
         />
+        <SlotRenderer name="aboveContent" content={this.props.content} />
         <RenderedView
           key={this.props.content['@id']}
           content={this.props.content}
@@ -251,6 +253,7 @@ class View extends Component {
           token={this.props.token}
           history={this.props.history}
         />
+        <SlotRenderer name="belowContent" content={this.props.content} />
         {config.settings.showTags &&
           this.props.content.subjects &&
           this.props.content.subjects.length > 0 && (
diff --git a/packages/volto/src/components/theme/View/View.test.jsx b/packages/volto/src/components/theme/View/View.test.jsx
index 66d02014c6..0fd4580099 100644
--- a/packages/volto/src/components/theme/View/View.test.jsx
+++ b/packages/volto/src/components/theme/View/View.test.jsx
@@ -33,6 +33,9 @@ jest.mock('../SocialSharing/SocialSharing', () =>
 );
 jest.mock('../Comments/Comments', () => jest.fn(() => <div id="Comments" />));
 jest.mock('../Tags/Tags', () => jest.fn(() => <div id="Tags" />));
+jest.mock('../SlotRenderer/SlotRenderer', () =>
+  jest.fn(() => <div id="SlotRenderer" />),
+);
 jest.mock('../ContentMetadataTags/ContentMetadataTags', () =>
   jest.fn(() => <div id="ContentMetadataTags" />),
 );
diff --git a/packages/volto/src/components/theme/View/__snapshots__/View.test.jsx.snap b/packages/volto/src/components/theme/View/__snapshots__/View.test.jsx.snap
index 544bbf3fa3..49a539fd4e 100644
--- a/packages/volto/src/components/theme/View/__snapshots__/View.test.jsx.snap
+++ b/packages/volto/src/components/theme/View/__snapshots__/View.test.jsx.snap
@@ -7,9 +7,15 @@ exports[`View renders a document view 1`] = `
   <div
     id="ContentMetadataTags"
   />
+  <div
+    id="SlotRenderer"
+  />
   <div
     id="DefaultView"
   />
+  <div
+    id="SlotRenderer"
+  />
   <div
     id="Portal"
   />
@@ -23,9 +29,15 @@ exports[`View renders a summary view 1`] = `
   <div
     id="ContentMetadataTags"
   />
+  <div
+    id="SlotRenderer"
+  />
   <div
     id="SummaryView"
   />
+  <div
+    id="SlotRenderer"
+  />
   <div
     id="Portal"
   />
@@ -39,9 +51,15 @@ exports[`View renders a tabular view 1`] = `
   <div
     id="ContentMetadataTags"
   />
+  <div
+    id="SlotRenderer"
+  />
   <div
     id="TabularView"
   />
+  <div
+    id="SlotRenderer"
+  />
   <div
     id="Portal"
   />
diff --git a/packages/volto/src/config/index.js b/packages/volto/src/config/index.js
index 8c295e5a1c..9b394a473c 100644
--- a/packages/volto/src/config/index.js
+++ b/packages/volto/src/config/index.js
@@ -75,7 +75,7 @@ let config = {
     okRoute: '/ok',
     apiPath,
     apiExpanders: [
-      // Added here for documentation purposes, addded at the end because it
+      // Added here for documentation purposes, added at the end because it
       // depends on a value of this object.
       // Add the following expanders for only issuing a single request.
       // https://6.docs.plone.org/volto/configuration/settings-reference.html#term-apiExpanders
@@ -223,6 +223,7 @@ let config = {
   },
   addonRoutes: [],
   addonReducers: {},
+  slots: {},
   components,
 };
 
@@ -250,5 +251,6 @@ ConfigRegistry.widgets = config.widgets;
 ConfigRegistry.addonRoutes = config.addonRoutes;
 ConfigRegistry.addonReducers = config.addonReducers;
 ConfigRegistry.components = config.components;
+ConfigRegistry.slots = config.slots;
 
 applyAddonConfiguration(ConfigRegistry);
diff --git a/packages/volto/src/helpers/Slots/index.tsx b/packages/volto/src/helpers/Slots/index.tsx
new file mode 100644
index 0000000000..864b209162
--- /dev/null
+++ b/packages/volto/src/helpers/Slots/index.tsx
@@ -0,0 +1,12 @@
+import type { Content } from '@plone/types';
+import { matchPath } from 'react-router-dom';
+
+export function RouteCondition(path: string, exact?: boolean) {
+  return ({ pathname }: { pathname: string }) =>
+    Boolean(matchPath(pathname, { path, exact }));
+}
+
+export function ContentTypeCondition(contentType: string[]) {
+  return ({ content }: { content: Content }) =>
+    contentType.includes(content?.['@type']);
+}
diff --git a/packages/volto/src/helpers/index.js b/packages/volto/src/helpers/index.js
index e67c383e4e..99cf5aa21e 100644
--- a/packages/volto/src/helpers/index.js
+++ b/packages/volto/src/helpers/index.js
@@ -129,3 +129,4 @@ export {
   getWorkflowOptions,
 } from './Workflows/Workflows';
 export { getSiteAsyncPropExtender } from './Site';
+export { ContentTypeCondition } from './Slots';
diff --git a/packages/volto/test-setup-config.js b/packages/volto/test-setup-config.js
index 7ae9bae43b..18a121888e 100644
--- a/packages/volto/test-setup-config.js
+++ b/packages/volto/test-setup-config.js
@@ -188,3 +188,4 @@ config.set('experimental', {
     enabled: false,
   },
 });
+config.set('slots', {});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d4a23e2f1c..d7d8135798 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -308,7 +308,7 @@ importers:
         version: 2.4.3(react-router-dom@5.2.0)(react@17.0.2)
       react-select:
         specifier: 4.3.1
-        version: 4.3.1(@types/react@17.0.70)(react-dom@17.0.2)(react@17.0.2)
+        version: 4.3.1(@types/react@18.2.57)(react-dom@17.0.2)(react@17.0.2)
       react-select-async-paginate:
         specifier: 0.5.3
         version: 0.5.3(react-dom@17.0.2)(react-select@4.3.1)(react@17.0.2)
@@ -1442,6 +1442,12 @@ importers:
       '@plone/volto-slate':
         specifier: workspace:*
         version: link:../volto-slate
+      '@types/react':
+        specifier: ^18.2.57
+        version: 18.2.57
+      '@types/react-dom':
+        specifier: ^18.2.19
+        version: 18.2.19
       autoprefixer:
         specifier: 10.4.8
         version: 10.4.8(postcss@8.4.31)
@@ -1771,7 +1777,7 @@ importers:
         version: 2.4.3(react-router-dom@5.2.0)(react@17.0.2)
       react-select:
         specifier: 4.3.1
-        version: 4.3.1(@types/react@17.0.70)(react-dom@17.0.2)(react@17.0.2)
+        version: 4.3.1(@types/react@18.2.57)(react-dom@17.0.2)(react@17.0.2)
       react-select-async-paginate:
         specifier: 0.5.3
         version: 0.5.3(react-dom@17.0.2)(react-select@4.3.1)(react@17.0.2)
@@ -1958,19 +1964,16 @@ importers:
         version: 12.1.5(react-dom@17.0.2)(react@17.0.2)
       '@testing-library/react-hooks':
         specifier: 8.0.1
-        version: 8.0.1(@types/react@17.0.70)(react-dom@17.0.2)(react-test-renderer@17.0.2)(react@17.0.2)
+        version: 8.0.1(@types/react@18.2.57)(react-dom@17.0.2)(react-test-renderer@17.0.2)(react@17.0.2)
       '@types/jest':
         specifier: ^29.5.8
         version: 29.5.8
       '@types/lodash':
         specifier: ^4.14.201
         version: 4.14.201
-      '@types/react':
-        specifier: ^17.0.52
-        version: 17.0.70
-      '@types/react-dom':
-        specifier: ^17
-        version: 17.0.23
+      '@types/react-router-dom':
+        specifier: ^5.3.3
+        version: 5.3.3
       '@types/react-test-renderer':
         specifier: 18.0.1
         version: 18.0.1
@@ -5166,7 +5169,7 @@ packages:
     resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
     dev: false
 
-  /@emotion/react@11.11.1(@types/react@17.0.70)(react@17.0.2):
+  /@emotion/react@11.11.1(@types/react@18.2.57)(react@17.0.2):
     resolution: {integrity: sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==}
     peerDependencies:
       '@types/react': '*'
@@ -5182,7 +5185,7 @@ packages:
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@17.0.2)
       '@emotion/utils': 1.2.1
       '@emotion/weak-memoize': 0.3.1
-      '@types/react': 17.0.70
+      '@types/react': 18.2.57
       hoist-non-react-statics: 3.3.2
       react: 17.0.2
     dev: false
@@ -6883,7 +6886,7 @@ packages:
       react: '>=16'
     dependencies:
       '@types/mdx': 2.0.10
-      '@types/react': 18.2.55
+      '@types/react': 18.2.57
       react: 18.2.0
     dev: true
 
@@ -16898,7 +16901,7 @@ packages:
       vitest: 0.34.6(jsdom@22.1.0)(lightningcss@1.23.0)
     dev: true
 
-  /@testing-library/react-hooks@8.0.1(@types/react@17.0.70)(react-dom@17.0.2)(react-test-renderer@17.0.2)(react@17.0.2):
+  /@testing-library/react-hooks@8.0.1(@types/react@18.2.57)(react-dom@17.0.2)(react-test-renderer@17.0.2)(react@17.0.2):
     resolution: {integrity: sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -16915,7 +16918,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.20.6
-      '@types/react': 17.0.70
+      '@types/react': 18.2.57
       react: 17.0.2
       react-dom: 17.0.2(react@17.0.2)
       react-error-boundary: 3.1.4(react@17.0.2)
@@ -17213,10 +17216,14 @@ packages:
       '@types/unist': 2.0.10
     dev: true
 
+  /@types/history@4.7.11:
+    resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
+    dev: true
+
   /@types/hoist-non-react-statics@3.3.5:
     resolution: {integrity: sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==}
     dependencies:
-      '@types/react': 18.2.55
+      '@types/react': 18.2.57
       hoist-non-react-statics: 3.3.2
 
   /@types/html-minifier-terser@5.1.2:
@@ -17408,7 +17415,7 @@ packages:
   /@types/reach__router@1.3.14:
     resolution: {integrity: sha512-2iOQZbwfw1ZYwYK+dRp7D1b8kU6GlFPJ/iEt33zDYxfId5CAKT7vX3lN/XmJ+FaMZ3FyB99tPgfajcmZnTqdtg==}
     dependencies:
-      '@types/react': 18.2.55
+      '@types/react': 18.2.57
     dev: true
 
   /@types/react-dom@17.0.23:
@@ -17419,20 +17426,19 @@ packages:
   /@types/react-dom@18.2.12:
     resolution: {integrity: sha512-QWZuiA/7J/hPIGocXreCRbx7wyoeet9ooxfbSA+zbIWqyQEE7GMtRn4A37BdYyksnN+/NDnWgfxZH9UVGDw1hg==}
     dependencies:
-      '@types/react': 18.2.27
+      '@types/react': 18.2.57
     dev: true
 
   /@types/react-dom@18.2.19:
     resolution: {integrity: sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==}
     dependencies:
-      '@types/react': 18.2.55
-    dev: true
+      '@types/react': 18.2.57
 
   /@types/react-redux@7.1.30:
     resolution: {integrity: sha512-i2kqM6YaUwFKduamV6QM/uHbb0eCP8f8ZQ/0yWf+BsAVVsZPRYJ9eeGWZ3uxLfWwwA0SrPRMTPTqsPFkY3HZdA==}
     dependencies:
       '@types/hoist-non-react-statics': 3.3.5
-      '@types/react': 18.2.55
+      '@types/react': 18.2.57
       hoist-non-react-statics: 3.3.2
       redux: 4.1.0
     dev: false
@@ -17441,21 +17447,36 @@ packages:
     resolution: {integrity: sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==}
     dependencies:
       '@types/hoist-non-react-statics': 3.3.5
-      '@types/react': 18.2.55
+      '@types/react': 18.2.57
       hoist-non-react-statics: 3.3.2
       redux: 4.1.0
     dev: true
 
+  /@types/react-router-dom@5.3.3:
+    resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 18.2.57
+      '@types/react-router': 5.1.20
+    dev: true
+
+  /@types/react-router@5.1.20:
+    resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 18.2.57
+    dev: true
+
   /@types/react-syntax-highlighter@11.0.5:
     resolution: {integrity: sha512-VIOi9i2Oj5XsmWWoB72p3KlZoEbdRAcechJa8Ztebw7bDl2YmR+odxIqhtJGp1q2EozHs02US+gzxJ9nuf56qg==}
     dependencies:
-      '@types/react': 18.2.55
+      '@types/react': 18.2.57
     dev: true
 
   /@types/react-test-renderer@18.0.1:
     resolution: {integrity: sha512-LjEF+jTUCjzd+Qq4eWqsmZvEWPA/l4L0my+YWN5US8Fo3wZOMiyrpBshHDFbkO8usjdO1B430mEWNU/i1MF7Qg==}
     dependencies:
-      '@types/react': 18.2.55
+      '@types/react': 18.2.57
     dev: true
 
   /@types/react@17.0.70:
@@ -17479,6 +17500,14 @@ packages:
       '@types/prop-types': 15.7.10
       '@types/scheduler': 0.16.6
       csstype: 3.1.2
+    dev: true
+
+  /@types/react@18.2.57:
+    resolution: {integrity: sha512-ZvQsktJgSYrQiMirAN60y4O/LRevIV8hUzSOSNB6gfR3/o3wCBFQx3sPwIYtuDMeiVgsSS3UzCV26tEzgnfvQw==}
+    dependencies:
+      '@types/prop-types': 15.7.10
+      '@types/scheduler': 0.16.6
+      csstype: 3.1.2
 
   /@types/resolve@1.20.2:
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
@@ -35571,13 +35600,13 @@ packages:
       '@seznam/compose-react-refs': 1.0.6
       react: 17.0.2
       react-is-mounted-hook: 1.1.2(react-dom@17.0.2)(react@17.0.2)
-      react-select: 4.3.1(@types/react@17.0.70)(react-dom@17.0.2)(react@17.0.2)
+      react-select: 4.3.1(@types/react@18.2.57)(react-dom@17.0.2)(react@17.0.2)
       sleep-promise: 9.1.0
     transitivePeerDependencies:
       - react-dom
     dev: false
 
-  /react-select@4.3.1(@types/react@17.0.70)(react-dom@17.0.2)(react@17.0.2):
+  /react-select@4.3.1(@types/react@18.2.57)(react-dom@17.0.2)(react@17.0.2):
     resolution: {integrity: sha512-HBBd0dYwkF5aZk1zP81Wx5UsLIIT2lSvAY2JiJo199LjoLHoivjn9//KsmvQMEFGNhe58xyuOITjfxKCcGc62Q==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0
@@ -35585,7 +35614,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.6
       '@emotion/cache': 11.11.0
-      '@emotion/react': 11.11.1(@types/react@17.0.70)(react@17.0.2)
+      '@emotion/react': 11.11.1(@types/react@18.2.57)(react@17.0.2)
       memoize-one: 5.2.1
       prop-types: 15.7.2
       react: 17.0.2