Unable to register custom components in Builder nextJS

[sohail]

Hi @manish-sharma ,

I am trying to setup builder to my existing code repo.
I did run the npm init @builder.io@latest command

I am unable to register my components and see them in builder custom components.

I registered using the button. but in my builder I am unable to see it.

This was a simple and small component.
For bigger components like the one below, it shows no props passed.

This is my code:

import React from "react";
import styles from "./styles.module.css";

type PullQuoteData = {
  quote: string;
  sourceName: string;
  backgroundImage?: string;
  source: string;
};

type PullQuoteDataProps = {
  data: PullQuoteData;
};

const PullQuote: React.FC<PullQuoteDataProps> = ({ data }) => {
  return (
    <div
      className={`${!data?.backgroundImage ? styles.pullQuoteContainer : styles.pullQuoteBackground} h-[459px] w-screen justify-center`}
      style={{
        backgroundImage: `url(${data?.backgroundImage ?? ""})`,
      }}
    >
      <div
        className={`${styles.pullQuoteWrapper} mt-16 mb-10 max-w-[750px] min-w-[350px] gap-8 flex-col justify-center items-center`}
      >
        <div
          className={`${styles.pullQuoteTitleWrapper} px-16 py-12 italic rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-3xl relative text-center font-bold`}
        >
          <div
            className={`${styles.borderQuotes} absolute inset-0 -top-3 flex justify-center text-4xl md:text-6xl lg:text-8xl xl:text-8xl`}
          >
            &ldquo;
          </div>
          <div className={`${styles.pullQuoteTitle}`}>{data?.quote ?? ""}</div>
        </div>
        <div
          className={`${styles.pullQuoteAuthor} max-w-[715px] text-center font-medium`}
        >
          - {data?.sourceName ?? ""}, {data?.source ?? ""}
        </div>
      </div>
    </div>
  );
};
export default PullQuote;

Please help me resolve this.

[manish-sharma]

Hello @sohail,

Could you please attempt to import the builder-registry.tsx file into either the builder.tsx or _app.tsx file for the pages route?

Thank you.

[sohail]

This worked. Thank you Manish. You’re awesome