# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.reactium.io/reactium-toolkit/creating-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.