> ## Documentation Index
> Fetch the complete documentation index at: https://help.experro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom components

Experro's Base Theme gives you the freedom to design and integrate your unique custom components seamlessly into the Visual Builder. Unlock endless possibilities and bring your vision to life effortlessly.

<Info>
  #### Tip!

  Consider looking at the [Component Best Practices](./components-best-practices) for some tips!
</Info>

To create a custom component, follow these steps to create a basic React component in the `src/components/cms-library` folder:

**Step 1:**

```js theme={null}
import React from 'react';

const CustomComponent = () => {
  return (
    <div>
      {/* Add your component's content here */}
    </div>
  );
}

export default CustomComponent;
```

**Step 2:**
Once you have created your custom component, import your custom component in the `src/components/cms-library/index.ts` file and export your component from the same file, as demonstrated in the example below.

```js theme={null}
// Import your CustomComponent
import CustomComponent from 'path/CustomComponent';

// ...other code

export {
  // ...other exports
  CustomComponent,
};
```

**Step 3:**
After creating your custom component, the next step is to create a widget for it, to make it availabe in Visuals Builder component list.

To gain a comprehensive understanding of widgets, please refer to the [Widget](./widgets) documentation.