Skip to content
Last update: March 22, 2024


In this article, we will explore how to register any custom component in the CMS. The registration of custom components allows you to use any UI components like Slider in the CMS when creating content.

Register Custom Components

To register a custom component in the CMS:

  1. Create a reference for the custom component you want to register. The wrapper component should be a .ts file. It describes the inputs—or the props—that should be editable in the Visual Editor.
  2. Register the reference using the useBuilder composable which we created here. This will make the custom component available for use in the CMS.
  3. Provide a list of components to the RenderContent component. This allows you to use the custom components in the CMS.

Example. Slider Component Registration

In this example, we will show how to register a Slider component in the CMS:

  1. Create a reference for the Slider component:

    import Slider from "../../../static-content/components/slider.vue";
    export const slider = {
      component: Slider,
      name: "Slider",
      inputs: [
          name: "slides",
          type: "list",
          defaultValue: [],
          subFields: [
              name: "image",
              type: "string",
  2. Register the slider component with the useBuilder composable:

    import { createApp } from "vue";
    import App from "./App.vue";
    import * as builderSharedComponents from "@/shared/builder-io/components/custom";
    export default async () => {
        // ...
        const app = createApp(App);
        const { registerCustomComponents } = useBuilder();
  3. Provide this list of components to the RenderContent component:

        <RenderContent :custom-components="registeredComponents" />
    <script setup>
    import { RenderContent } from "";
    import { useBuilder } from "@/shared/builder-io/composables/useBuilder";
    const { registeredComponents } = useBuilder();

The Slider component is now registered and available for use in the CMS. You can now use the Slider component when creating content in the CMS:

Slider Component in CMS