Accordian is not rendering as expected in reactjs

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key

What are you trying to accomplish
I want to integrate builder on a FAQ page

Screenshots or video link


Code stack you are integrating Builder with

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

import React from ‘react’
import { BuilderComponent } from ‘’
import ErrorPage from ‘components/ErrorPage’
import Loader from ‘components/LoadingSpinner’

class CatchallPage extends React.Component {
state = { notFound: false };

render() {
  return !this.state.notFound ? (
      apiKey="API KEY"
      contentLoaded={content => {
        if (!content) {
          this.setState({ notFound: true });
      <Loader />
  ) : (
    <ErrorPage /> // Your 404 content


export default CatchallPage

Hi @TestMail and welcome to the forum!

I checked out your project content link and I am seeing the Accordion element rendering correctly on my end! Here is a look:

Can you describe what you are seeing or record a Loom of this in action?

Logan from Account Support

I have created sandbox, please go through this once

You can find the issue in /faq-figma page
please navigate to specified url in sandbox
ref- React App

@TestMail if you open the console in that sandbox, you will see the problem and the suggestion:

Missing @[]( installation,
please install and import @[](
to use Accordion in your content, more info here:

These widgets are not part of Builder by default, since lots of users don’t need them or will provide their own implementation of them.

1 Like

Thanks @armando , It’s working now :smiley: