Last modified: August 22, 2025
The CrmStageTracker component renders a lifecycle or pipeline stage progress bar and a list of properties. Available for contacts, companies, deals, tickets, and custom objects. Use this component to show stage progress for the currently displaying record, or you can specify a record. You can also edit the property values inline and your changes will automatically save when leaving the field or pressing Enter.
ui-extensions-component-dealstagetracker
import { CrmStageTracker } from '@hubspot/ui-extensions/crm';

const Extension = () => {
  return (
    <CrmStageTracker
      objectId="13833764681"
      objectTypeId="0-3"
      properties={['dealname', 'amount']}
    />
  );
};
PropTypeDescription
objectTypeIdStringThe numeric ID of the type of associated object to display (e.g., 0-1 for contacts. See complete list of object IDs.
objectIdStringThe ID of the CRM record to display property data from.
propertiesArrayThe properties to display, up to four. By default, will display property data from the currently displaying record. To pull data from a specific record, include the objectTypeId and objectId props.
showPropertiesBooleanWhether to display the properties below the progress indicator. When set to false, properties will not display.