UI components overview (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

To create the UI for a UI extension, you can include any number of HubSpot-provided reusable components. These components range from simple text fields to out-of-the-box CRM object reports, and each component offers customization options through properties.

Components are imported at the top of your tsx or jsx extension file. Depending on the type of component, you'll need to import them from one of two SDK directories.

import { Alert, Text } from '@hubspot/ui-extensions'; import { CrmAssociationPivot, CrmActionLink } from '@hubspot/ui-extensions/crm';

Please note: to access the latest components, ensure that you've installed the latest npm package by running npm i @hubspot/ui-extensions in the extensions directory.

Standard components

Standard components are components that can be used for both internal and external data. These components do not fetch data on their own, but are more flexible in their implementation.

These components are imported from '@hubspot/ui-extensions'.

Component Description
Accordion A collapsable accordion section that can contain other components.
Alert Alerts for indicating statuses and action outcomes, such as success and error messages.
Box Component used for layout management. Can be used with Flex. Learn more about managing extension layout.
Button Buttons that enable users to perform actions, such as sending or retrieving data.
Button row For rendering multiple buttons.
Checkbox A single checkbox input. To display multiple checkboxes, use ToggleGroup instead.
DateInput A field that enables users to select a date.
DescriptionList Displays pairs of custom labels and values, similar to how HubSpot properties appear in the left sidebar of CRM records.
Divider A horizontal line for separating components within an extension.
Dropdown A dropdown menu for selecting values, styled as either buttons or hyperlinks.
EmptyState A labeled illustration to indicate a component without content.
ErrorState Labeled illustrations to indicate errors.
Flex Wraps other components in an empty div set to display=flex. Use this component and Box to manage extension layout.
Form A form for submitting data, which can contain other related components such as Input, Select, and Button.
Heading Renders large text for titles.
Image An image, primarily used for adding logos or other visual brand identity assets, or to accentuate other extension content.
Input A text input field where users can enter custom text values. Primarily used within Form components.
Link A clickable hyperlink for navigating to external and HubSpot app pages, or for triggering functions.
List An ordered or unordered list of items.
LoadingSpinner A visual indicator that the card is loading or processing.
MultiSelect A dropdown select field where users can select multiple values. To allow only one value to be selected, use Select instead. Primarily used within Form components.
NumberInput A number input field. Primarily used within Form components.
Panel A panel that opens on the right side of the page, containing other components. Can be opened and closed by using onClick handles in Button, Link, Tag, and Image components.
ProgressBar A visual representation of data in motion toward a positive or negative target. Can display both numbers and percentages.
RadioButton A radio select button. If you want to include more than two radio buttons, or are building a Form, it's recommended to use ToggleGroup instead.
Select A dropdown select field where a user can select a single value. To allow selecting multiple values, use MultiSelect instead.
Statistics A visual spotlight of one or more data points. Includes numeric values and trend indicators (increasing/decreasing percentage).
StepIndicator A visual indicator to describe the progress within a multi-step process.
StepperInput Similar to the NumberInput component, but this field enables users to increase or decrease the value by a set amount.
Table Displays data in columns and rows. Tables can be paginated and sortable.
Tag Colored labels for categorizing information or other components. Can be static or clickable for triggering functions.
Text Renders text with formatting options.
Tile A rectangular, bordered container for creating groups of related components.
TextArea Similar to Text, but for longer sets of text. Includes props for configuring field size, maximum characters, and resizeability.
Toggle A boolean toggle switch that can be configured with sizing and label options.
ToggleGroup A list of selectable checkboxes or radio buttons.

CRM data components

CRM data components can pull data directly from the currently displaying CRM record, including information about associated records and single object reports. These components can only be placed in the middle column of CRM records. Learn more about CRM data components.

These components are imported from @hubspot/ui-extensions/crm.

Component Description
CrmAssociationPivot A list of records associated with the currently dislplaying record, organized by their association label.
CrmAssociationPropertyList An editable list of CRM properties belonging to a record associated with the currently displaying record. 
CrmAssociationTable A table of records associated with the currently displaying record.
CrmDataHighlight A list of CRM properties belonging to the currently displaying record or another specified record.
CrmPropertyList An editable list of CRM properties belonging to the currently displaying record or another specified record.
CrmReport Display an existing single object report. Includes filtering options, or can display all report data unfiltered.
CrmStageTracker A lifecycle or pipeline stage progress bar with a list of properties.
CrmStatistics Display summaries of data calculated from the currently displaying record's associations. For example, the average revenue across a contact's associated companies.

CRM action components

CRM action components provide a built-in set of CRM-related actions, including adding notes to records, opening a one-to-one email composition window, creating new records, and more. Each component can perform the same set of actions, so which component to choose will depend on your needs and preferences. Learn more about CRM action components.

CRM action components are imported from @hubspot/ui-extensions/crm.

Component Description
CrmActionButton A button that can execute a built-in set of CRM actions. 
CrmActionLink A clickable link that can execute a built-in set of CRM actions.
CrmCardActions Smaller standalone or dropdown menu buttons that can contain multiple CRM actions.
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.