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.

There's a lot to know about creating elements. Let the ARCLI do it for you:

$ arcli toolkit element
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,

The Element zone value is derived from the Sidebar url value. Given the url: /toolkit/button/colors The corresponding zone would be: button-colors

The above registration creates the following view in the Toolkit:

Last updated