# New Addon - Custom Components

**URL:** <https://discourse.getcockpit.com/t/new-addon-custom-components/401>\
**Category:** Addons\
**Created:** [November 14, 2018, 11:34pm UTC](https://discourse.getcockpit.com/t/new-addon-custom-components/401 "2018-11-14T23:34:09Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![pauloamgomes](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/pauloamgomes/32/48_2.png) [@pauloamgomes](https://discourse.getcockpit.com/u/pauloamgomes)\
**Post date:** [November 14, 2018, 11:34pm UTC](https://discourse.getcockpit.com/t/new-addon-custom-components/401/1 "2018-11-14T23:34:09Z")

</div>

Another addon that enhances the user interface around the Layout field.

The layout field is quite powerful and can be used for approaching page based components (Hero, Carousels, Banners, Sections, Headings, etc…), however, if we have dozens of components we may don’t want to have all of them available on every layout field. To use the addon just use a new attribute on the layout field with the list of component names that should be present in that field, e.g.:

```json
{
  "enabled": [
    "section",
    "text",
    "heading",
    "divider"
  ]
}

```

and when adding components it will only display:

 ![](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/57314fb21b3756c6d41c609cf2e41a62cf71191f.png)

> **[pauloamgomes/Cockpit-CustomComponents](https://github.com/pauloamgomes/Cockpit-CustomComponents)**
>
> Cockpit CMS Addon that provides a configuration to disable core components from the layout field - pauloamgomes/Cockpit-CustomComponents

---

<div class="post-metadata">

**Author:** ![rohagihu](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/rohagihu/32/696_2.png) [@rohagihu](https://discourse.getcockpit.com/u/rohagihu)\
**Post date:** [April 6, 2020, 12:17pm UTC](https://discourse.getcockpit.com/t/new-addon-custom-components/401/2 "2020-04-06T12:17:39Z")

</div>

Hi,

is there a way to preview some content like in the text component?

Maybe also select the field(s) for previewing?

Thank you

![customcomp](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/299833b915643abb7cbd8b68621c4e2a0311ec81.jpeg)

---

<div class="post-metadata">

**Author:** ![pauloamgomes](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/pauloamgomes/32/48_2.png) [@pauloamgomes](https://discourse.getcockpit.com/u/pauloamgomes)\
**Post date:** [April 6, 2020, 1:19pm UTC](https://discourse.getcockpit.com/t/new-addon-custom-components/401/3 "2020-04-06T13:19:31Z")

</div>

Afraid not, that’s something requested many times int the past, think the layout field needs a revamp with better visualisation of the inserted components. In the meantime something can help is to provide some details when inserting the component (you can replace the compponent name with any text)

---

<div class="post-metadata">

**Author:** ![rohagihu](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/rohagihu/32/696_2.png) [@rohagihu](https://discourse.getcockpit.com/u/rohagihu)\
**Post date:** [April 7, 2020, 9:31am UTC](https://discourse.getcockpit.com/t/new-addon-custom-components/401/4 "2020-04-07T09:31:22Z")

</div>

Alright, thank you for fast answering 🙂

---

<div class="post-metadata">

**Author:** ![alessandro1992ma](https://avatars.discourse-cdn.com/v4/letter/a/c37758/32.png) [@alessandro1992ma](https://discourse.getcockpit.com/u/alessandro1992ma)\
**Post date:** [April 19, 2020, 7:18pm UTC](https://discourse.getcockpit.com/t/new-addon-custom-components/401/5 "2020-04-19T19:18:41Z")

</div>

Can the components be modified?

Example of the Text article which is a Wysiwyg, I wish I could put my settings.

---

<div class="post-metadata">

**Author:** ![pauloamgomes](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/pauloamgomes/32/48_2.png) [@pauloamgomes](https://discourse.getcockpit.com/u/pauloamgomes)\
**Post date:** [April 20, 2020, 6:05pm UTC](https://discourse.getcockpit.com/t/new-addon-custom-components/401/6 "2020-04-20T18:05:34Z")

</div>

Create a custom component, its just a matter to use the UI for that, you can add the fields you want for the component.

---

<div class="post-metadata">

**Author:** ![alessandro1992ma](https://avatars.discourse-cdn.com/v4/letter/a/c37758/32.png) [@alessandro1992ma](https://discourse.getcockpit.com/u/alessandro1992ma)\
**Post date:** [April 20, 2020, 6:57pm UTC](https://discourse.getcockpit.com/t/new-addon-custom-components/401/7 "2020-04-20T18:57:48Z")

</div>

is it possible to have an example?

---

<div class="post-metadata">

**Author:** ![alessandro1992ma](https://avatars.discourse-cdn.com/v4/letter/a/c37758/32.png) [@alessandro1992ma](https://discourse.getcockpit.com/u/alessandro1992ma)\
**Post date:** [April 28, 2020, 7:52am UTC](https://discourse.getcockpit.com/t/new-addon-custom-components/401/8 "2020-04-28T07:52:41Z")

</div>

@pauloamgomes @raffaelj  
Is it possible to have an example?

I downloaded the package [Cockpit + React Static Demo Project](https://discourse.getcockpit.com/t/cockpit-react-static-demo-project/356/9)  
and I saw that there is a components.json file in storage but it doesn’t work.

What am I doing wrong? How should custom components be set up?

Thanks

---

<div class="post-metadata">

**Author:** ![raffaelj](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/raffaelj/32/331_2.png) [@raffaelj](https://discourse.getcockpit.com/u/raffaelj)\
**Post date:** [April 28, 2020, 6:19pm UTC](https://discourse.getcockpit.com/t/new-addon-custom-components/401/9 "2020-04-28T18:19:31Z")

</div>

Sorry, but I never used that addon and I also didn’t test the demo project. Maybe this is a problem:

> [@Cockpit + React Static Demo Project](https://discourse.getcockpit.com/t/cockpit-react-static-demo-project/356/17):
>
> This is a very old demo, not sure if everything still works on latest version of cockpit.

But I guess, that there is a json field in the ui to add the field options like you would add them for single fields, too.