# Static Custom Components

**URL:** <https://forum.builder.io/t/static-custom-components/15793>\
**Category:** CMS\
**Tags:** visual-editor, react, custom-components, nextjs\
**Created:** [September 23, 2025, 9:52pm UTC](https://forum.builder.io/t/static-custom-components/15793 "2025-09-23T21:52:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![elir-usafacts](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/elir-usafacts/32/5155_2.png) [@elir-usafacts](https://forum.builder.io/u/elir-usafacts)\
**Post date:** [September 23, 2025, 9:52pm UTC](https://forum.builder.io/t/static-custom-components/15793/1 "2025-09-23T21:52:24Z")

</div>

Can you make a static custom component which is selectable by content editors to edit fields but cannot be moved nor needs to be dragged and dropped. E.g., There is a page header on every page of a couple page model types, it always lives in the same place, however I want to add some configurable fields on that specific component so they don’t have to live on the page model.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 26, 2025, 1:17pm UTC](https://forum.builder.io/t/static-custom-components/15793/2 "2025-09-26T13:17:34Z")

</div>

Hello @elir-usafacts,

To create a static custom component in [Builder.io](http://Builder.io) that is editable but not movable or draggable, you should use the `noWrap` option during the [component registration](https://www.builder.io/c/docs/custom-components-setup#setting-component-options). This ensures the component is not wrapped in additional elements by Builder and remains in a fixed location on the page.

Here’s a step-by-step guide to achieve this:

1. **Define the Component** : Create your React component with configurable fields that content editors can edit.

2. **Register the Component with Builder** : Use the `noWrap` property when registering the component so it is not draggable and maintains its static position.

3. **Integrate the Component** : Make sure this component is placed explicitly within your page templates where it needs to be static.

By setting `noWrap: true`, the Builder editor will render the component inline without surrounding it with any additional DOM elements, helping maintain its static placement. For more about `registerComponent` options, you can consult the [documentation on component options](https://www.builder.io/c/docs/register-components-options).

https://www.loom.com/embed/d8decfeb6eb2464088c6ad9308e31844?sid=193732bb-ac9f-434c-88ba-757b4eb9ea64

Thanks,

---

<div class="post-metadata">

**Author:** ![elir-usafacts](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/elir-usafacts/32/5155_2.png) [@elir-usafacts](https://forum.builder.io/u/elir-usafacts)\
**Post date:** [September 30, 2025, 12:10am UTC](https://forum.builder.io/t/static-custom-components/15793/3 "2025-09-30T00:10:16Z")

</div>

Tried the following:

Static component’s builder file

```typescript
import dynamic from 'next/dynamic';

import { Builder } from '@builder.io/react';

import { THEME_COLORS } from '@/components/page-banner/page-banner.types';
import { PageType } from '@/types/builder';

Builder.registerComponent(
  dynamic(async () =>
    import('./page-banner').then((module) => module.PageBanner),
  ),
  {
    name: 'PageBanner',
    friendlyName: 'Page Banner',
    noWrap: true,
    hideFromInsertMenu: true,
    inputs: [
      {
        name: 'title',
        type: 'string',
        required: true,
        helperText: 'Main title for the banner',
        showIf: (options) => options.get('model') === PageType.Article,
      },
      {
        name: 'subtitle',
        type: 'string',
        required: false,
        helperText: 'Subtitle for the banner (Article variant only)',
        showIf: (options) => options.get('model') === PageType.Article,
      },
      {
        name: 'htmlTitle',
        type: 'richText',
        required: true,
        helperText:
          'HTML title with picker span.',
        showIf: (options) =>
          options.get('model') === PageType.Answer,
      },
      {
        name: 'pageBanner',
        type: 'object',
        subFields: [
          {
            name: 'pageBannerIcon',
            type: 'pageBannerIconPicker',
          },
          {
            name: 'pageBannerTheme',
            type: 'enum',
            enum: Object.values(THEME_COLORS),
          },
        ],
      },
    ],
    image: 'https://unpkg.com/css.gg@2.0.0/icons/svg/format-heading.svg',
  },
);

```

And here’s a truncated version of the implementation:

```typescript
export default function ClientArticlePage({
  content,
  model,
  searchParams,
  apiKey,
}: ClientArticlePageProps) {
  const { useV2Design } = useBrandRefresh('PageBanner');

  return (
    <BuilderContent content={content} model={model} modelName={model}>
      {(data: ArticlePageData, _, fullContent: ArticlePage) => {
        return (
          <main
            className={cn(styles.articlePage, 'border border-hairline-on-grey')}
          >

            {useV2Design ? (
              <PageBanner
                model={model}
                title={data.title}
                description={data.description}
                breadcrumbPages={[{ title: 'Articles', url: indexPageUrl }]}
                currentPage={data.title}
                currentPageUrl={data.url}
                theme={pageBannerValues.theme}
                bannerIcon={pageBannerValues.bannerIcon}
              />
            ) : (
              <></>
            )}
          </main>
        );
      }}
    </BuilderContent>
  );

```

The PageBanner is not clickable at all.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 30, 2025, 2:06am UTC](https://forum.builder.io/t/static-custom-components/15793/4 "2025-09-30T02:06:35Z")

</div>

Hello @elir-usafacts,

Yes, when you pass `noWrap: true`, the component will not be directly clickable—you’ll need to select it from the **Layers** panel in order to modify its values.

If you’d like to make the `noWrap` component clickable, you can pass `props.attributes` in the component JSX. However, please note that doing so will also make the component draggable and droppable:

```auto
{...props.attributes} 
className={`my-class ${props.attributes.className}`}

```

You can also reference this related discussion for more context:  
[Custom component with noWrap true causes focus issue](https://forum.builder.io/t/custom-component-with-nowrap-true-cause-focus-issue/817/2)

---

<div class="post-metadata">

**Author:** ![elir-usafacts](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/elir-usafacts/32/5155_2.png) [@elir-usafacts](https://forum.builder.io/u/elir-usafacts)\
**Post date:** [September 30, 2025, 2:42am UTC](https://forum.builder.io/t/static-custom-components/15793/5 "2025-09-30T02:42:45Z")

</div>

![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/414aabe413d989772adca982de67ffa4b95e8a23.jpeg)  
Not showing up in layers at all. I followed the documentation and it doesn’t work…