diff --git a/docs/src/components/content-container.md b/docs/src/components/content-container.md
index 068fe34..7a00b36 100644
--- a/docs/src/components/content-container.md
+++ b/docs/src/components/content-container.md
@@ -18,13 +18,6 @@ The appropriate HTML element for the page structure is determined based on the `
 
 ## Properties
 
-### abstract
-
-- Type: `Boolean`
-- Default: `false`
-
-If set, the heading is rendered as an abstract heading. (e.g. `<slot />`)
-
 ### tag
 
 - Type: `String`
@@ -35,7 +28,7 @@ Tag for the element.
 ### rootTags
 
 - Type: `Array`
-- Default: `inject('rootTags', ['main'])`
+- Default: `inject('semanticRelease_rootTags', ['main'])`
 
 Available tags for the root structure.
 
@@ -44,7 +37,7 @@ Available tags for the root structure.
 ### contentTags
 
 - Type: `Array`
-- Default: `inject('contentTags', ['article', 'section'])`
+- Default: `inject('semanticRelease_contentTags', ['article', 'section'])`
 
 Available tags for the content structure.
 
@@ -57,6 +50,13 @@ Available tags for the content structure.
 
 Can be used to overwrite the level.
 
+### debug
+
+- Type: `Boolean`
+- Default: `inject('semanticRelease_debug', false)`
+
+If set, the following attributes are set on the element: `data-current-tag`, `data-current-level` and `data-parent-level`.
+
 ## v-slot
 
 ### default
@@ -85,8 +85,7 @@ Can be used to overwrite the level.
 </template>
 
 <script setup>
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
-import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+import { ContentContainer, ContentHeadline } from 'vue-semantic-structure';
 </script>
 ```
 
diff --git a/docs/src/components/content-headline.md b/docs/src/components/content-headline.md
index 260158b..d5ac9ce 100644
--- a/docs/src/components/content-headline.md
+++ b/docs/src/components/content-headline.md
@@ -20,13 +20,6 @@ The deeper the nesting, the smaller the heading.
 
 ## Properties
 
-### abstract
-
-- Type: `Boolean`
-- Default: `false`
-
-If set, the heading is rendered as an abstract heading. (e.g. `<slot />`)
-
 ### tag
 
 - Type: `String`
@@ -34,6 +27,13 @@ If set, the heading is rendered as an abstract heading. (e.g. `<slot />`)
 
 Tag for the element.
 
+### debug
+
+- Type: `Boolean`
+- Default: `inject('semanticRelease_debug', false)`
+
+If set, the following attributes are set on the element: `data-current-tag`, `data-current-level` and `data-parent-level`.
+
 ## v-slot
 
 ### default
@@ -62,8 +62,7 @@ Tag for the element.
 </template>
 
 <script setup>
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
-import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+import { ContentContainer, ContentHeadline } from 'vue-semantic-structure';
 </script>
 ```
 
diff --git a/docs/src/composables/use-content-container.md b/docs/src/composables/use-content-container.md
index 33b4f32..e9d1773 100644
--- a/docs/src/composables/use-content-container.md
+++ b/docs/src/composables/use-content-container.md
@@ -34,12 +34,12 @@ const { currentTag } = useContentContainer()
 
 ## Options
 
-| Property      | Type     | Description                               | Default Value            |
-| ------------- | -------- | ----------------------------------------- | ------------------------ |
-| `tag`         | `String` | Can be used to overwrite the tag.         | `undefined`              |
-| `contentTags` | `Array`  | Available tags for the content structure. | `['section', 'article']` |
-| `rootTags`    | `Array`  | Available tags for the root structure.    | `['main', undefined]`    |
-| `level`       | `Number` | Can be used to overwrite the level.       | `undefined`              |
+| Property      | Type     | Description                               | Default Value                                                   |
+| ------------- | -------- | ----------------------------------------- | --------------------------------------------------------------- |
+| `tag`         | `String` | Can be used to overwrite the tag.         | `undefined`                                                     |
+| `contentTags` | `Array`  | Available tags for the content structure. | `inject('semanticRelease_contentTags', ['article', 'section'])` |
+| `rootTags`    | `Array`  | Available tags for the root structure.    | `inject('semanticRelease_rootTags', ['main'])`                  |
+| `level`       | `Number` | Can be used to overwrite the level.       | `undefined`                                                     |
 
 ## Return
 
diff --git a/docs/src/introduction.md b/docs/src/introduction.md
index 5c26f0c..a95f314 100644
--- a/docs/src/introduction.md
+++ b/docs/src/introduction.md
@@ -60,8 +60,7 @@ If `ContentContainer` is level 2, `ContentHeadline` level 2 is rendered as `h2`.
 </template>
 
 <script setup>
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
-import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+import { ContentContainer, ContentHeadline } from 'vue-semantic-structure';
 </script>
 ```
 
diff --git a/docs/src/usage.md b/docs/src/usage.md
index be67ffa..f2239b1 100644
--- a/docs/src/usage.md
+++ b/docs/src/usage.md
@@ -22,7 +22,7 @@ The main structure is in the `<main>` tag, which contains the main components.
 </template>
 
 <script setup>
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import { ContentContainer } from 'vue-semantic-structure';
 </script>
 ```
 
@@ -56,7 +56,7 @@ It is recommended to create a separate component that extends the `ContentContai
 </template>
 
 <script setup>
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import { ContentContainer } from 'vue-semantic-structure';
 </script>
 ```
 
@@ -76,7 +76,7 @@ In comparison to the basic application, the entire content is enclosed in anothe
 </template>
 
 <script setup>
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import { ContentContainer } from 'vue-semantic-structure';
 </script>
 ```
 
diff --git a/package.json b/package.json
index b666987..7a8c362 100644
--- a/package.json
+++ b/package.json
@@ -22,9 +22,7 @@
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    },
-    "./ContentContainer.vue": "./dist/ContentContainer.vue",
-    "./ContentHeadline.vue": "./dist/ContentHeadline.vue"
+    }
   },
   "main": "./dist/index.cjs",
   "files": [
diff --git a/playground/src/components/DebugArticleContentContainer.vue b/playground/src/components/DebugArticleContentContainer.vue
index 629e69b..12dd461 100644
--- a/playground/src/components/DebugArticleContentContainer.vue
+++ b/playground/src/components/DebugArticleContentContainer.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { inject, provide } from 'vue';
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import { ContentContainer } from 'vue-semantic-structure';
 
 const props = defineProps({
   debug: {
diff --git a/playground/src/components/DebugContainer.vue b/playground/src/components/DebugContainer.vue
index 7d9b9be..3049610 100644
--- a/playground/src/components/DebugContainer.vue
+++ b/playground/src/components/DebugContainer.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { inject, provide } from 'vue';
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import { ContentContainer } from 'vue-semantic-structure';
 
 const props = defineProps({
   debug: {
diff --git a/playground/src/components/DebugHeadline.vue b/playground/src/components/DebugHeadline.vue
index 91c794e..25d7b63 100644
--- a/playground/src/components/DebugHeadline.vue
+++ b/playground/src/components/DebugHeadline.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { inject } from 'vue';
-import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+import { ContentHeadline } from 'vue-semantic-structure';
 
 const debug = inject('debugHeadings', false);
 </script>
diff --git a/src/ContentContainer.js b/src/ContentContainer.js
new file mode 100644
index 0000000..9867303
--- /dev/null
+++ b/src/ContentContainer.js
@@ -0,0 +1,72 @@
+import { h, inject, provide } from 'vue';
+import useContentContainer from './useContentContainer';
+
+const ContentContainer = {
+  name: 'ContentContainer',
+  props: {
+    tag: {
+      type: String,
+      default: null
+    },
+    rootTags: {
+      type: Array,
+      default() {
+        return inject('semanticRelease_rootTags', ['main']);
+      }
+    },
+    contentTags: {
+      type: Array,
+      default() {
+        return inject('semanticRelease_contentTags', ['article', 'section']);
+      }
+    },
+    level: {
+      type: Number,
+      default: undefined
+    },
+    debug: {
+      type: Boolean,
+      default() {
+        return inject('semanticRelease_debug', false);
+      }
+    }
+  },
+
+  setup(props) {
+    const { parentLevel, currentLevel, currentTag } = useContentContainer(props);
+    provide('semanticRelease_debug', props.debug);
+    return { parentLevel, currentLevel, currentTag };
+  },
+
+  render() {
+    const { currentTag, parentLevel, currentLevel } = this;
+    return h(
+      currentTag,
+      {
+        ...this.$attrs,
+        ...getDebugAttrs(this)
+      },
+      {
+        default: () =>
+          this.$slots.default({
+            currentTag,
+            parentLevel,
+            currentLevel
+          })
+      }
+    );
+  }
+};
+
+const getDebugAttrs = context => {
+  if (context.debug) {
+    return {
+      'data-current-tag': context.currentTag,
+      'data-current-level': context.currentLevel,
+      'data-parent-level': context.parentLevel
+    };
+  }
+  return {};
+};
+
+export default ContentContainer;
diff --git a/src/ContentContainer.vue b/src/ContentContainer.vue
deleted file mode 100644
index 1cc7c0e..0000000
--- a/src/ContentContainer.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <component v-if="!abstract && currentTag" :is="currentTag" v-bind="$attrs">
-    <slot
-      v-bind="{
-        parentLevel,
-        currentLevel,
-        currentTag
-      }" />
-  </component>
-  <slot
-    v-else
-    v-bind="{
-      parentLevel,
-      currentLevel,
-      currentTag
-    }" />
-</template>
-
-<script>
-import { inject } from 'vue';
-import useContentContainer from './useContentContainer';
-
-export default {
-  inheritAttrs: false,
-
-  props: {
-    abstract: {
-      type: Boolean,
-      default: false
-    },
-    tag: {
-      type: String,
-      default: null
-    },
-    rootTags: {
-      type: Array,
-      default() {
-        return inject('rootTags', ['main']);
-      }
-    },
-    contentTags: {
-      type: Array,
-      default() {
-        return inject('contentTags', ['article', 'section']);
-      }
-    },
-    level: {
-      type: Number,
-      default: undefined
-    }
-  },
-
-  setup(props) {
-    const { parentLevel, currentLevel, currentTag } = useContentContainer(props);
-    return { parentLevel, currentLevel, currentTag };
-  }
-};
-</script>
diff --git a/src/ContentHeadline.js b/src/ContentHeadline.js
new file mode 100644
index 0000000..08c43a6
--- /dev/null
+++ b/src/ContentHeadline.js
@@ -0,0 +1,53 @@
+import { h, inject } from 'vue';
+import useContentHeadline from './useContentHeadline';
+
+const ContentHeadline = {
+  name: 'ContentHeadline',
+  props: {
+    tag: {
+      type: String,
+      default: null
+    },
+    debug: {
+      type: Boolean,
+      default() {
+        return inject('semanticRelease_debug', false);
+      }
+    }
+  },
+
+  setup() {
+    const { parentLevel, currentLevel, currentTag } = useContentHeadline();
+    return { parentLevel, currentLevel, currentTag };
+  },
+
+  render() {
+    const { currentTag, currentLevel } = this;
+    return h(
+      currentTag,
+      {
+        ...this.$attrs,
+        ...getDebugAttrs(this)
+      },
+      {
+        default: () =>
+          this.$slots.default({
+            currentTag,
+            currentLevel
+          })
+      }
+    );
+  }
+};
+
+const getDebugAttrs = context => {
+  if (context.debug) {
+    return {
+      'data-current-tag': context.currentTag,
+      'data-current-level': context.currentLevel
+    };
+  }
+  return {};
+};
+
+export default ContentHeadline;
diff --git a/src/ContentHeadline.vue b/src/ContentHeadline.vue
deleted file mode 100644
index fd41826..0000000
--- a/src/ContentHeadline.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <component v-if="!abstract" :is="currentTag" v-bind="$attrs">
-    <slot :currentTag="currentTag" :parentLevel="parentLevel" :currentLevel="currentLevel" />
-  </component>
-  <slot v-else :currentTag="currentTag" :parentLevel="parentLevel" :currentLevel="currentLevel" />
-</template>
-
-<script>
-import useContentHeadline from './useContentHeadline';
-
-export default {
-  inheritAttrs: false,
-
-  props: {
-    abstract: {
-      type: Boolean,
-      default: false
-    },
-    tag: {
-      type: String,
-      default: null
-    }
-  },
-
-  setup() {
-    const { parentLevel, currentLevel, currentTag } = useContentHeadline();
-    return { parentLevel, currentLevel, currentTag };
-  }
-};
-</script>
diff --git a/src/index.js b/src/index.js
index 7ab1db7..4920255 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,2 +1,5 @@
+export { default as ContentContainer } from './ContentContainer.js';
+export { default as ContentHeadline } from './ContentHeadline.js';
+
 export { default as useContentContainer } from './useContentContainer.js';
 export { default as useContentHeadline } from './useContentHeadline.js';
diff --git a/src/useContentContainer.js b/src/useContentContainer.js
index c649e44..9cb78fe 100644
--- a/src/useContentContainer.js
+++ b/src/useContentContainer.js
@@ -2,14 +2,14 @@ import { provide, inject, computed } from 'vue';
 
 export default function useContentContainer({ tag, contentTags, rootTags, level } = {}) {
   tag = tag || null;
-  rootTags = rootTags || inject('rootTags', ['main']);
-  contentTags = contentTags || inject('contentTags', ['article', 'section']);
+  rootTags = rootTags || inject('semanticRelease_rootTags', ['main']);
+  contentTags = contentTags || inject('semanticRelease_contentTags', ['article', 'section']);
   level = level || undefined;
 
-  provide('rootTags', rootTags);
-  provide('contentTags', contentTags);
+  provide('semanticRelease_rootTags', rootTags);
+  provide('semanticRelease_contentTags', contentTags);
 
-  const parentLevel = inject('parentLevel', 0);
+  const parentLevel = inject('semanticRelease_parentLevel', 0);
   const currentLevel = computed(() => (level !== undefined ? level : parentLevel + 1));
   const currentTag = computed(() => {
     if (tag) {
@@ -21,8 +21,8 @@ export default function useContentContainer({ tag, contentTags, rootTags, level
     return contentTags[currentLevel.value % contentTags.length];
   });
 
-  provide('rootLevel', rootTags.length);
-  provide('parentLevel', currentLevel.value);
+  provide('semanticRelease_rootLevel', rootTags.length);
+  provide('semanticRelease_parentLevel', currentLevel.value);
 
   return {
     parentLevel,
diff --git a/src/useContentHeadline.js b/src/useContentHeadline.js
index 3c2edba..fa1cbf3 100644
--- a/src/useContentHeadline.js
+++ b/src/useContentHeadline.js
@@ -1,8 +1,8 @@
 import { inject, computed } from 'vue';
 
 export default function useContentHeadline({ tag } = {}) {
-  const parentLevel = inject('parentLevel', 1) + 1;
-  const rootLevel = inject('rootLevel', 1);
+  const parentLevel = inject('semanticRelease_parentLevel', 1) + 1;
+  const rootLevel = inject('semanticRelease_rootLevel', 1);
 
   const currentLevel = computed(() => getMax(parentLevel - rootLevel));
   const currentTag = computed(() => tag || `h${currentLevel.value}`);
diff --git a/test/contentContainer.test.js b/test/contentContainer.test.js
index 6723cf4..ca6cc0d 100644
--- a/test/contentContainer.test.js
+++ b/test/contentContainer.test.js
@@ -1,13 +1,13 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, test } from 'vitest';
 import { defineComponent } from 'vue';
-import ContentContainer from '../src/ContentContainer.vue';
+import ContentContainer from '../src/ContentContainer';
 
 describe('ContentContainer', () => {
   test('Structure Value Check', () => {
     const DebugContentContainer = defineComponent({
       components: { ContentContainer },
-      template: `<ContentContainer abstract v-slot="{currentTag, currentLevel, parentLevel}"><component v-if="currentTag" :is="currentTag" :data-current-tag="currentTag" :data-current-level="currentLevel":data-parent-level="parentLevel"><slot /></component><slot v-else /></ContentContainer>`
+      template: `<ContentContainer debug><slot /></ContentContainer>`
     });
     const root = defineComponent({
       components: { ContentContainer: DebugContentContainer },
diff --git a/test/contentHeadline.test.js b/test/contentHeadline.test.js
index 05dc1e1..c6421f0 100644
--- a/test/contentHeadline.test.js
+++ b/test/contentHeadline.test.js
@@ -1,14 +1,14 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, test } from 'vitest';
 import { defineComponent } from 'vue';
-import ContentHeadline from '../src/ContentHeadline.vue';
-import ContentContainer from '../src/ContentContainer.vue';
+import ContentContainer from '../src/ContentContainer';
+import ContentHeadline from '../src/ContentHeadline';
 
 describe('contentHeadline', () => {
   test('Structure Value Check', () => {
     const DebugContentHeadline = defineComponent({
       components: { ContentHeadline },
-      template: `<ContentHeadline abstract v-slot="{currentTag, currentLevel, parentLevel}"><component :is="currentTag" :data-current-tag="currentTag" :data-current-level="currentLevel":data-parent-level="parentLevel">{{ currentTag }}</component></ContentHeadline>`
+      template: `<ContentHeadline v-slot="{ currentTag }">{{ currentTag }}</ContentHeadline>`
     });
 
     const root = defineComponent({
diff --git a/test/useContentContainer.test.js b/test/useContentContainer.test.js
index 221c461..ff46a4b 100644
--- a/test/useContentContainer.test.js
+++ b/test/useContentContainer.test.js
@@ -6,10 +6,7 @@ import useContentContainer from '../src/useContentContainer';
 describe('useContentContainer', () => {
   test('Structure Value Check', () => {
     const ContentContainer = defineComponent({
-      template: `
-      <component v-if="currentTag" :is="currentTag" :data-current-tag="currentTag" :data-current-level="currentLevel" :data-parent-level="parentLevel"><slot /></component>
-      <slot v-else />
-      `,
+      template: `<component :is="currentTag" :data-current-tag="currentTag" :data-current-level="currentLevel" :data-parent-level="parentLevel"><slot /></component>`,
       setup() {
         const { currentTag, currentLevel, parentLevel } = useContentContainer();
         return { currentTag, currentLevel, parentLevel };
diff --git a/test/useContentHeadline.test.js b/test/useContentHeadline.test.js
index 8205b29..efc7401 100644
--- a/test/useContentHeadline.test.js
+++ b/test/useContentHeadline.test.js
@@ -7,8 +7,7 @@ import useContentHeadline from '../src/useContentHeadline';
 describe('useContentHeadline', () => {
   test('Structure Value Check', () => {
     const ContentContainer = defineComponent({
-      template: `<component v-if="currentTag" :is="currentTag" :data-current-tag="currentTag" :data-current-level="currentLevel" :data-parent-level="parentLevel"><slot /></component>
-        <slot v-else />`,
+      template: `<component :is="currentTag" :data-current-tag="currentTag" :data-current-level="currentLevel" :data-parent-level="parentLevel"><slot /></component>`,
       setup() {
         const { currentTag, currentLevel, parentLevel } = useContentContainer();
         return { currentTag, currentLevel, parentLevel };
@@ -66,8 +65,7 @@ describe('useContentHeadline', () => {
 describe('useContentHeadline (rootTags)', () => {
   test('Structure Value Check', () => {
     const ContentContainer = defineComponent({
-      template: `<component v-if="currentTag" :is="currentTag" :data-current-tag="currentTag" :data-current-level="currentLevel" :data-parent-level="parentLevel"><slot /></component>
-        <slot v-else />`,
+      template: `<component :is="currentTag" :data-current-tag="currentTag" :data-current-level="currentLevel" :data-parent-level="parentLevel"><slot /></component>`,
       setup() {
         const { currentTag, currentLevel, parentLevel } = useContentContainer({
           rootTags: ['main', 'article']
@@ -77,7 +75,7 @@ describe('useContentHeadline (rootTags)', () => {
     });
 
     const ContentHeadline = defineComponent({
-      template: '<component :is="currentTag" :data-level="level">{{currentTag}}</component>',
+      template: '<component :is="currentTag" :data-level="level">{{ currentTag }}</component>',
       setup() {
         const { currentTag, level } = useContentHeadline();
         return { currentTag, level };
@@ -110,7 +108,6 @@ describe('useContentHeadline (rootTags)', () => {
     });
 
     const wrapper = mount(root);
-
     expect(wrapper.find('main > article > h1').text()).toBe(String('h1'));
     expect(wrapper.find('main > article > section > h2').text()).toBe(String('h2'));
     expect(wrapper.find('main > article > section > article > h3').text()).toBe(String('h3'));
@@ -132,7 +129,7 @@ describe('useContentHeadline (rootTags)', () => {
 describe('useContentHeadline (contentTags)', () => {
   test('Structure Value Check', () => {
     const ContentContainer = defineComponent({
-      template: `<component v-if="currentTag" :is="currentTag" :data-current-tag="currentTag" :data-current-level="currentLevel" :data-parent-level="parentLevel"><slot /></component>
+      template: `<component :is="currentTag" :data-current-tag="currentTag" :data-current-level="currentLevel" :data-parent-level="parentLevel"><slot /></component>
         <slot v-else />`,
       setup() {
         const { currentTag, currentLevel, parentLevel } = useContentContainer({