Can't import nextUI components directly in build.registry.ts

Technical Questions
, , ,
1

What are you trying to accomplish
We want to import a nextUI compoent and register it as a custom component in builder.io without having to create a new component to re-export it

We want to do this:

import { Button } from “@nextui-org/react”;

Builder.registerComponent(withChildren(Button), …)

When going to localhost → opening the builder devtool → component → button gives this error
“Error loading components”
“Builder Devtools Fetch Error: Component a1234567 not found”

2

Hello @joanord97pp,

Welcome to the builder.io forum post.

You can certainly use Next UI components in the builder, we tested and were able to get it working.

Here is an example

import {NextUIButton} from './components/NextUIButton'; 

Builder.registerComponent(
  dynamic(() => import("./components/NextUIButton")),
  {
    name: "Next Button",
  }
);

/components/NextUIButton.tsx

import * as React from "react";
import {Button} from "@nextui-org/button";

function NextUIButton() {
  return (
    <Button>Press me</Button>
  );
}

export default NextUIButton;