Set properties in a configuration file to add your component to the UI Builder in your instance.

1. In your project directory, open now-ui.json.
2. Add the components.[component-name].uiBuilder object to the file. This object adds the component to the UI Builder.
   This object includes these key-value pairs:

   Key	Data type	Description
   components.[component-name].uiBuilder	Object	Object that adds the component to UI Builder.
   components.[component-name].uiBuilder.label	String	Required. The display name of the component in UI Builder.
   components.[component-name].uiBuilder.icon	String	Required. The name of the icon that appears in UI Builder. View the list of available icons on the Developer Portal.
   components.[component-name].uiBuilder.description	String	Required. A short description of the functionality of the component.

   {
     "components": {
       "card": {
         "uiBuilder": {
           "label" : "Card",
           "icon" : "chat-fill", 
           "description" : "A visual card format for a record.",
           "associatedTypes": ["global.core"]
         },

3. If your component includes properties, add the components.[component-name].properties aray to the file. This adds the properties as configuration options for the component in UI Builder.
   This object includes these key-value pairs:

   Key	Data type	Description
   components.[component-name].properties	Array <Object>	An array of objects that includes all the properties of the component and all relevant information about those properties.
   components.[component-name].properties[].name	String	Name of the property in your component's code.
   components.[component-name].properties[].label	String	Display name of the property to display in UI Builder, if applicable.
   components.[component-name].properties[].description	String	A short description of what the property does or how to use it.
   components.[component-name].properties[].readOnly	Boolean	When true, prevents a user from configuring the property in UI Builder. Default: false.
   components.[component-name].properties[].required	Boolean	When true, the user must configure the property. Default: false.
   components.[component-name].properties[].defaultValue	String	The default value when the user does not provide one.
   components.[component-name].properties[].associatedTypes	Array	Describes where in the UI Builder toolbox the component appears. Value must be "global.core".
   components.[component-name].properties[].typeMetadata	Object	Extra configuration data that some data types require, such as reference properties and choice lists.

   {
     "components": {
       "properties": [
   		    {
   			"name": "backgroundColor",
   			"label": "Background Color",
   			"description": "Background Color",
   			"readOnly": false,
   			"required": false,
   			"defaultValue": "lightgray"
   		    },
   		    {
   		       "name": "cardType",
   			"label": "Type of card",
   			"description": "Type of card",
   			"readOnly": false,
   			"required": false,
   			"defaultValue": ""
   		    }
   			]

4. Save the file.