how to make builder.io register shadcn/ui components in a turborepo
Unanswered
Arboreal ant posted this in #help-forum
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
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:
But even if I import this file into the
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
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