> For the complete documentation index, see [llms.txt](https://docs.reactium.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.reactium.io/reactium-toolkit/creating-elements.md).

# Creating Elements

Elements are components added to specific zones in the Toolkit Plugin. You can create new elements by registering components with the [Toolkit SDK](/reactium-toolkit/sdk.md).

{% tabs %}
{% tab title="TL;DR" %}
There's a lot to know about creating elements. Let the ARCLI do it for you:

```
$ arcli toolkit element
```

{% endtab %}

{% tab title="Prompts" %}

```bash
[ARCLI] > Type: Top-Level
[ARCLI] > ID: test
[ARCLI] > Label: Test
[ARCLI] > URL?: Yes
[ARCLI] > Order: 100
[ARCLI] > Directory: /My Reactium Project/src/app/components/Toolkit/Sidebar

[ARCLI] > A new toolkit sidebar item will be created using the following configuration:

{
  "type": "group",
  "id": "test",
  "label": "Test",
  "url": "/toolkit",
  "order": 100,
  "directory": "/My Reactium Project/src/app/components/Toolkit/Sidebar/Test"
}

[ARCLI] > Proceed?: (y/N)
```

{% endtab %}
{% endtabs %}

{% code title="/ButtonColors/reactium-hooks.js" %}

```jsx
import ButtonColors from '.';
import Reactium from 'reactium-core/sdk';


// Register a new Reactium Plugin
Reactium.Plugin.register('ToolkitButtonColors').then(() => {

    // Ensure the toolkit plugin is available
    if (!Reactium.Toolkit) return;

    // Wait for plugins to be initialized
    Reactium.Hook.register('plugin-ready', () => {
    
        // Get the MenuLink component
        const MenuLink = Reactium.Component.get('RTKMENULINK');

        // Register the Sideber link
        Reactium.Toolkit.Sidebar.register('button-colors', {
            order: 10,
            component: MenuLink,
            children: 'Button Colors',
            url: '/toolkit/button/colors',
        });

        // Register the Element
        Reactium.Toolkit.Elements.register('button-colors', {
            order: 0,
            zone: 'button-colors',
            component: ButtonColors,
        });
    });
});
```

{% endcode %}

{% hint style="info" %}
The Element **zone** value is derived from the Sidebar **url** value. Given the url: `/toolkit/button/colors`\
\
The corresponding zone would be:  \
`button-colors`
{% endhint %}

The above registration creates the following view in the Toolkit:

![/toolkit/button/colors](/files/-MTMIibIsoiG1lQNO4Um)