Next.js Discord

Discord Forum

how to make builder.io register shadcn/ui components in a turborepo

Unanswered
Arboreal ant posted this in #help-forum
Open in Discord
Avatar
Arboreal antOP
Hi All,

I'm trying to get started with builder.io but am having trouble getting it to recognise my shadcn/ui component library components.

According to the docs all you have to do is call Builder.registerComponent and ensure that a file which has a <BuilderComponent component imports it.

My shadcn components (and other very generic components) all live in the packages/ui-lib directory. These files are imported into the nextjs app found at apps/frontend. The local components in apps/frontend/components are picked up easily, but I can't seem to make it detect any shad components.

I've tried creating a wrapper file:
// components/builder-components/button.tsx
import { Builder } from '@builder.io/react'
import { Button } from 'ui-lib';

export default Builder.registerComponent(Button, { 
  name: 'Button',
  inputs: [{ name: 'variant', type: 'text', enum: ['primary', 'secondary'] }],
  image: 'https://tabler-icons.io/static/tabler-icons/icons-png/square.png'
})


But even if I import this file into the components/builder.tsx file it doesn't get detected.

If I call the registerComponent function inside the builder.tsx file it does work, but that could mean dozens or hundreds of registrations happening in this one file which feels icky.

Has anyone solved a similar issue? Got any tips? How did you get builder working?

Reigster docs: https://www.builder.io/c/docs/custom-components-setup

0 Replies