---
title: "Smart Components Hub"
slug: "smart-components-hub"
status: "update"
updated: 2026-10-20T14:21:14Z
published: 2026-10-20T14:21:14Z
canonical: "docs.unqork.io/smart-components-hub"
---

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

# Smart Components Hub

The Smart Components Hub lists all Smart Components available in the environment. From here, Creators can browse components by type, view component details, open a component in the editor, and create new ones.

To open the Smart Components Hub, click ![LibraryBig](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261020_142112_cf8e2b8852de4527b3950dffc960a7a6.svg?sv=2026-02-06&spr=https&st=2026-10-29T23%3A11%3A03Z&se=2026-10-30T00%3A11%3A03Z&sr=c&sp=r&sig=bsPMnagFE%2FPexyBAkXksOp7Rhgtt0Yxqhhe4%2FhkqwKk%3D) **Libraries** in the global header, then select ![Puzzle](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261020_142112_1e86a4de03ed4623832c6456592a9eb1.svg?sv=2026-02-06&spr=https&st=2026-10-29T23%3A11%3A03Z&se=2026-10-30T00%3A11%3A03Z&sr=c&sp=r&sig=bsPMnagFE%2FPexyBAkXksOp7Rhgtt0Yxqhhe4%2FhkqwKk%3D) **Smart Components Hub**. Select ![LayoutGrid](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261020_142112_8792b0a0b516439b8d12a1037988557d.svg?sv=2026-02-06&spr=https&st=2026-10-29T23%3A11%3A03Z&se=2026-10-30T00%3A11%3A03Z&sr=c&sp=r&sig=bsPMnagFE%2FPexyBAkXksOp7Rhgtt0Yxqhhe4%2FhkqwKk%3D) **Dashboard** in the Explorer panel.

![[docs-interactive-image:{"surface":"smart-components/hub-public"}] The Smart Components Hub dashboard on the Public tab, with a list of Smart Components showing Name, Type, Modules, Draft owner, and Modified date columns, the Public and Private tabs, the Create Component and Promote buttons, and the Explore panel.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261020_142112_d006b62c16b743a2ab6378a0e38e122e.png?sv=2026-02-06&spr=https&st=2026-10-29T23%3A11%3A03Z&se=2026-10-30T00%3A11%3A03Z&sr=c&sp=r&sig=bsPMnagFE%2FPexyBAkXksOp7Rhgtt0Yxqhhe4%2FhkqwKk%3D)

## Public and Private

Every Smart Component is either **Private** or **Public**. The state determines whether the component is reusable across modules and how the Build Agent uses it. The following sections describe each state.

| State | Reusable Across Modules | Used by Build Agent for Reuse | Can Change Back |
| --- | --- | --- | --- |
| **Private** | No (one placement only) | No | N/A |
| **Public** | Yes | Yes, as a preferred component | No |

### Public

Components created in the Smart Components Hub are Public drafts from creation. A new component displays in the Public list and in the **New Drafts** folder in the Explorer panel. After its first publish, the component enters the component tray and the Build Agent's reach.

A Public component works as follows:

- **Reuse**: Creators can add the component to any module. The Build Agent prefers Public components when it reuses existing components.
- **Component tray**: The tray lists only Public components that have been published, grouped by category.
- **Editing**: Creators in Module Builder can view and configure a Public component's instance settings, but cannot edit the underlying definition. To edit the definition, open the component from the Smart Components Hub.
- **Actions**: Duplicate, Promote, Export, and Delete Component are available for Public components only.
- **State**: A Public component cannot be made Private again.

> [!CAUTION]
> Editing a Public component propagates the change to every module that uses it immediately on publish.

### Private

Private components come only from the Build Agent, which creates them inside a module. A Private component belongs to that module, and it works as follows:

- **Placement**: A Private component can have only one placement in the environment. A placement is one instance of the component in a module component on the canvas. Adding a second instance, on the same canvas or on another, counts as a second placement. A container can render a Private component once for each row of data, like the rows of a table. That component counts as one placement however many rows render.
- **Second placements**: A second placement blocks the save. The platform prompts the Creator to create copies of the component instead.
- **Copying a module**: Copying a module that contains a Private component also copies its definition.
- **Component tray**: Private components never display in the tray, and the Build Agent does not reuse them.
- **Hub display**: The Private tab lists each component under the module that owns it.
- **Actions**: Private components offer View Details, Edit Component, Make Public, and Settings. Edit Component opens the owning module. A Private component is promoted and deleted with its module.

Selecting **Make Public** from the row actions menu makes the component available to the Build Agent and lets Creators add it to any module. This change is permanent.

**Making a container Public does not make its children Public.** When a container Smart Component is made Public, only the container definition becomes Public. Any child components nested inside an instance remain independently Private or Public based on their own state. Parent and children are promoted separately.

## Container Smart Components

Some Smart Components act as containers. They hold child components in typed slots instead of having fixed children built into their definition. Adding child components to a container instance and wiring them up requires the Build Agent. Drag-and-drop into a container Smart Component is not supported in 9.0.

Smart Component definitions do not support composition. Creators cannot combine multiple existing Smart Components into a new Smart Component definition. Composition happens on the module canvas. A container accepts child components in typed slots, and each child is configured on its own instance.

When the Build Agent updates a container definition, it analyzes whether the change is safe or potentially breaking for existing instances. Adding a new optional property is safe. Changing the type or structure of an existing property (for example, converting a text value to a child slot) might break existing instances. The Build Agent displays a warning before proceeding.

## Component List

The component list displays all Smart Components in the environment. Select **Public** or **Private** above the list to switch tabs. Each tab displays different columns. Select a component row to view the component's definition. For more information, see [Component Detail](/unqorkai/docs/smart-components-hub#component-detail).

### Public Tab

The Public tab lists every Public component in a flat list and displays the following columns:

| Column | Description |
| --- | --- |
| **Name** | The component's display name. |
| **Type** | The component type: **UI**, **Logic**, **Query**, or **Agentic**. |
| **Modules** | The number of modules in the environment that use the component. |
| **Draft owner** | The Creator who holds an open draft for this component, if any. |
| **Modified date** | The date the component was last published. |

The Public list sorts by **Modules** descending by default, placing the most-used components first.

### Private Tab

The Private tab groups components in an expandable tree by workspace, then application, then the module that owns each component. A module that belongs to more than one application displays under each of them. For a versioned application, the tree lists the Private Smart Components of the default version, not of a branch. The application row names that version. A module row displays how many Private components it lists. Some of an application's Private components might exist only on its branches. A note at the end of the module counts them, and they display once merged into the default version. Components whose module is outside the Creator's access display in a **Placed outside your access** group at the bottom.

Each component row displays how many instances of it the module places. Click the count to list each instance beneath the row, with its block key, module, and block type. A component the module does not place reads **Not placed**.

![[docs-interactive-image:{"surface":"smart-components/hub-private"}] The Smart Components Hub dashboard on the Private tab, with Private Smart Components grouped in an expandable workspace, application, and module tree, and Name, Type, Version, and Modified date columns.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261020_142112_452a151cef9941608e45d7a1cb27ed31.png?sv=2026-02-06&spr=https&st=2026-10-29T23%3A11%3A03Z&se=2026-10-30T00%3A11%3A03Z&sr=c&sp=r&sig=bsPMnagFE%2FPexyBAkXksOp7Rhgtt0Yxqhhe4%2FhkqwKk%3D)

The Private tab displays the following columns:

| Column | Description |
| --- | --- |
| **Name** | The workspace, application, module, or component name, with a module's component count and a component's instance count. |
| **Type** | The component type: **UI**, **Logic**, **Query**, or **Agentic**. |
| **Version** | For a versioned application, the default version that lists its components. Blank for an unversioned application. |
| **Modified date** | The date the component was last published. |

## Component Detail

Select a component row in the component list to view the component's definition. Click **Edit Component** to open the component in its Definition page.

### Component Definition (Read-Only)

Selecting a row opens the **Component Definition** modal, a read-only view of the component's definition. Select **View Details** from the row actions menu to open the same modal.

![[docs-interactive-image:{"surface":"smart-components/component-definition"}] The read-only Component Definition modal for a Smart Component, with Identity, Interface, and Used In sections and Close and Edit Component buttons.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261020_142113_fd21e16de7634bf487e52fee67580615.png?sv=2026-02-06&spr=https&st=2026-10-29T23%3A11%3A03Z&se=2026-10-30T00%3A11%3A03Z&sr=c&sp=r&sig=bsPMnagFE%2FPexyBAkXksOp7Rhgtt0Yxqhhe4%2FhkqwKk%3D)

The modal includes the following sections:

| Section | Description |
| --- | --- |
| **Identity** | The component's name, type, usage (**Public** or **Private**), and description. |
| **Interface** | The component's inputs and outputs. |
| **Used In** | Every workspace, application, and module that uses the component, in a hierarchy. |

The Used In section lists only modules that use this component directly. A module that reaches it through another Smart Component or through a module it imports is not listed.

Click **Close** to dismiss the modal. Click **Edit Component** to open the component's Definition page.

### Definition Page

Clicking **Edit Component** opens the Smart Component's Definition page. The page includes the Data and Chains panel, the chain canvas, and the Details panel. For more information about the page, see [Smart Component Editor](/unqorkai/docs/smart-component-editor).

![[docs-interactive-image:{"surface":"smart-components/definition-page"}] The Smart Component Definition page, with the Data and Chains panel, the logic chain canvas, and the Details panel showing the About and Used In sections.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261020_142113_77d9a4d00ee94a85973780ee046016b5.png?sv=2026-02-06&spr=https&st=2026-10-29T23%3A11%3A03Z&se=2026-10-30T00%3A11%3A03Z&sr=c&sp=r&sig=bsPMnagFE%2FPexyBAkXksOp7Rhgtt0Yxqhhe4%2FhkqwKk%3D)

## Component Actions

Click ![EllipsisVertical](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261020_142113_9129af2049604f85bfa09f670c2f0ea2.svg?sv=2026-02-06&spr=https&st=2026-10-29T23%3A11%3A03Z&se=2026-10-30T00%3A11%3A03Z&sr=c&sp=r&sig=bsPMnagFE%2FPexyBAkXksOp7Rhgtt0Yxqhhe4%2FhkqwKk%3D) (**ellipsis**) on any component row, in the Hub or in the Explorer panel, to access the following actions.

### Read Actions

These actions are available on every row a Creator can view.

| Action | Description |
| --- | --- |
| **View Details** | Opens the component detail dialog. Displays the component's identity, usage count, and interface. |
| **Edit Component** | Opens a Public component in the [Smart Component Editor](/unqorkai/docs/smart-component-editor). Opens a Private component in the module that owns it; for a versioned application, the module opens on the default version. Reads **View Component** for Creators whose role grants view but not edit permission on the component's Public or Private lens. |
| **Add to Agent Context** | Sends this component's logic and data to the Build Agent as context for the current session. Toggles to **Remove from Agent Context** when the component is already in context. Visible only when UnqorkAI is enabled. |
| **Publish Draft** | Opens the Publish dialog for the open draft. Visible only when the Creator holds a draft for this component. |
| **Discard Draft** | Discards the open draft and returns the component to its last published state. Visible only when the Creator holds a draft for this component. |

### Write Actions

These actions require specific permissions and are hidden when the Creator does not have the necessary grants.

| Action | Description |
| --- | --- |
| **Duplicate** | Creates a copy of this component in the Smart Components Hub. Public components only. Disabled while the Creator holds an open draft on the source component. |
| **Make Public** | Makes the component available to the Build Agent and lets Creators add it to any module. Displays when the component is currently Private. This change is permanent. See [Public and Private](/unqorkai/docs/smart-components-hub#public-and-private). |
| **Promote** | Opens the Promote dialog. Select a target environment and confirm to promote the component. Optionally include composed Smart Components as dependencies. Public components only; a Private component is promoted with its module. |
| **Export** | Downloads the component definition as an exportable file. Public components only. |
| **Settings** | Opens the component settings dialog. Rename the component, update its description, and set its category. For Query Smart Components, also configure execution behavior and role-based access controls. See [Smart Component Settings](/unqorkai/docs/smart-component-settings). |
| **Delete Component** | Permanently removes the component. Blocked while any module or other component references it. Public components only; a Private component is deleted with its module. |

## Filtering

The Public tab displays a flat list. The Private tab displays a workspace, application, and module tree.

Use the search box to filter by component name. Click the filter icon to the right of the search box to narrow results. The following filters are available:

| Filter | Description |
| --- | --- |
| **Type** | Narrows results to **UI**, **Logic**, **Query**, or **Agentic** components. |
| **Category** | Narrows results to a specific category in the environment. |
| **Draft** | Narrows results by draft status: owned by the current Creator, owned by another Creator, or active. |

## Drafts and Publishing

Editing a Smart Component creates a draft. A draft is an unpublished working copy of the component. Changes in the draft are not live until published. Only one Creator can own a draft at a time; the **Draft owner** column in the Public list displays who currently holds it.

While a draft is open, the component's row displays **Publish Draft** and **Discard Draft** in the ![EllipsisVertical](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261020_142113_9129af2049604f85bfa09f670c2f0ea2.svg?sv=2026-02-06&spr=https&st=2026-10-29T23%3A11%3A03Z&se=2026-10-30T00%3A11%3A03Z&sr=c&sp=r&sig=bsPMnagFE%2FPexyBAkXksOp7Rhgtt0Yxqhhe4%2FhkqwKk%3D) (**ellipsis**) menu. Publish Draft pushes the changes live to every module using the component. Discard Draft removes the draft and restores the last published definition.

If another Creator opens the component while a draft is open, they can take over the draft. The original holder receives a notification and loses save access until the draft is returned.

When updating a Public Smart Component, prefer additive changes: add new optional properties with sensible defaults. Renaming, removing, or retyping existing properties breaks every module instance that relies on them. When a change cannot be made backward-compatible, duplicate the component and adapt the copy instead of modifying the shared definition.

For full details on the draft editing workflow, see [Smart Component Editor](/unqorkai/docs/smart-component-editor).

## Promoting Smart Components

Click **Promote** in the Smart Components Hub toolbar to open the Promote Smart Components dialog. Select a target environment, then select the components to promote individually or use **Bulk Actions** to select all. A confirmation step displays before the promotion runs.

If a selected component composes other Smart Components, a warning displays for any composed components not included in the selection. These warnings do not block promotion. Select the missing components to resolve them before confirming.

Promotion history is available in the dialog and displays all previous promote actions for Smart Components.

## Creating a Smart Component

Click **+ Create Component** to create a new Smart Component. Enter a name, select a type (UI, Logic, Query, or Agentic), and confirm. The new component opens in the [Smart Component Editor](/unqorkai/docs/smart-component-editor).

A new component is a Public draft. For where it displays and when it becomes available, see [Public](/unqorkai/docs/smart-components-hub#public).

A component name must be unique and can contain only letters, numbers, and underscores. The same rules apply when renaming a component through **Settings**. Module blocks reference a component by its ID, so renaming a component does not break its placements.

---

**Changelog**

| Date | Change |
| --- | --- |
| 2026-10-20 | Reworded the container composition and Creating a Smart Component text, and changed Select to Click for buttons, links, and icons. |
| 2026-10-19 | Corrected the Public and Private default for Hub-created components; added Public, Private, Public Tab, Private Tab, and Definition Page sections; documented the New Drafts folder, the component tray rule, naming rules, and the Private placement limit; clarified container composition; replaced library wording with Smart Components Hub terminology; replaced static screenshots with interactive images. |
| 2026-10-15 | Private tab groups by workspace, application, and owning module, follows each versioned application's default version, and shows each component's instances, a Version column, and a count of branch-only components; Edit Component opens a Private component in its module; Duplicate, Promote, Export, and Delete Component are Public only. |
| 2026-09-16 | Noted that Edit Component reads View Component without the Smart Component edit permission. |
| 2026-09-10 | Added Agentic to Type column and Type filter; updated Create Component type list. |
| 2026-09-09 | Added no-composition constraint to Container section; added backward-compatibility guidance to Drafts and Publishing. |
| 2026-09-09 | Added single-instance per module constraint to Private description; added Container Smart Components section covering Build Agent wiring requirement, no drag-and-drop in 9.0, impact analysis on updates, and parent/children public state independence. |
| 2026-09-08 | Added Module Builder editing distinction — Creators can configure a Public component's instance in Module Builder but must use Edit Component to edit its definition. |
| 2026-09-04 | Renamed Discoverable to Public throughout; renamed Make Discoverable to Make Public; renamed Duplicate Component to Duplicate; rewrote Filtering section; expanded Component List column table; confirmed nav label Smart Components Hub; added Private module-copy behavior; corrected Delete description; removed incorrect Pending badge claim from Draft column; added default sort note; corrected Component Detail to describe hierarchy tree. |
| 2026-09-03 | Capitalized Private and Discoverable throughout; fixed all internal link paths to include /public/; added Building a Smart Component to See Also; added Dashboard icon. |
| 2026-08-31 | Added Discoverability section explaining private vs discoverable states. |
| 2026-08-28 | Removed the **Make Private** action. Discoverability is now one-way: a discoverable component cannot be made private again. |
| 2026-08-27 | Renamed the discoverability action from **Make Not Discoverable** to **Make Private**, matching the Discoverable and Private nomenclature in the platform. |
| 2026-08-25 | Added inline icons to Component Actions tables. Added Component Actions section with full row action reference, split into Read and Write actions. Added Component Detail section. Added Draft column to Component List table. Corrected row click behavior (opens detail dialog, not editor). Removed HR dividers between sections. Updated Click to Select per style guide. |
| 2026-08-13 | Added Promoting Smart Components section. |
| 2026-08-10 | Initial publication. |

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

Rendering is the process of loading components and displaying the final result on the front-end screen.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

A JavaScript property is a member of an object that associates a key with a value. A JavaScript object is a data structure that stores a collection of properties.

The UI (user interface) is a device's end-user interaction and communication point. It can include display screens, keyboards, and mouse. It is also how a user interacts with your application.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.