---
sourceDocument: Brazil Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/application-development

 Release :

    - brazil

ft:locale :

    - en-US

ft:publication_title :

    - Brazil Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Configure a component for UI Builder

# Configure a component for UI Builder {#ariaid-title1}

Release version: Brazil  
Updated October 27, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read  
Add a uiBuilder block to a component's now-ui.json file so that the component appears in the UI Builder toolbox on a workspace landing page.

## Before you begin

* The ui-component extension must be installed. See [Install the UI component CLI extension](https://www.servicenow.com/docs/FGXeLXFsYDtdByOIiPN2tQ "Install the UI component extension to develop Next Experience UI Framework components with the ServiceNow CLI.").
* The Next Experience UI component project must exist.
{#configure-component-ui-builder__ul_xg1_pb5_1lc}Role required: admin

## About this task

The uiBuilder block controls how the component appears in the UI Builder toolbox. The block is stored in the now-ui.json file, at the root of the project. For the full list of uiBuilder properties, see the component configuration properties reference. For more information about UI Builder, see the [UI Builder overview](https://www.servicenow.com/docs/bundle/yokohama-application-development/page/administer/ui-builder/concept/ui-builder-overview.html).

## Procedure

1. Open the now-ui.json file at the root of the project.
2. Add a uiBuilder block to the object for your component under the components property.  

       {
                               "components": {
                               "mycompany-stock-tracker": {
                               "uiBuilder": {
                               "associatedTypes": ["global.core", "global.landing-page"],
                               "label": "My Stock Tracker",
                               "icon": "chart-forecast-fill",
                               "description": "Stock Tracking component",
                               "internalComponent": false,
                               "category": "Stocks",
                               "searchFacets": ["global.stocks:global.tracking"]
                               }
                               }
                               }
                               }

3. Set the associatedTypes values that match where the component appears in the toolbox.  
   * `global.layout` for layout components, such as containers.
   * `global.visualization` for components that visualize data, such as reports or lists.
   * `global.core` for base components that apply in all contexts, such as Design System components.

   UI Builder currently supports customizing Configurable Workspace landing pages only.
4. Save the now-ui.json file.
5. Deploy the component to the instance by running the following command:  

       snc ui-component deploy

6. Log in to the instance that you deployed the component to.
7. Open your workspace landing page in UI Builder.
8. Select Add Component.  
   The toolbox displays the component by its label, such as My Stock Tracker.
9. Drag the component onto the landing page.

## Result

The component appears on the workspace landing page.