Skip to main content

When building 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.

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'.

ComponentDescription
AccordionA collapsable accordion section that can contain other components.
AlertAlerts for indicating statuses and action outcomes, such as success and error messages.
BarChart NEWA bar chart used for visualizing categorical data.
BoxComponent used for layout management. Can be used with Flex. Learn more about managing extension layout.
ButtonButtons that enable users to perform actions, such as sending or retrieving data.
Button rowFor rendering multiple buttons.
CheckboxA single checkbox input. To display multiple checkboxes, use ToggleGroup instead.
DateInputA field that enables users to select a date.
DescriptionListDisplays pairs of custom labels and values, similar to how HubSpot properties appear in the left sidebar of CRM records.
DividerA horizontal line for separating components within an extension.
DropdownA dropdown menu for selecting values, styled as either buttons or hyperlinks.
EmptyStateA labeled illustration to indicate a component without content.
ErrorStateLabeled illustrations to indicate errors.
FlexWraps other components in an empty div set to display=flex. Use this component and Box to manage extension layout.
FormA form for submitting data, which can contain other related components such as Input, Select, and Button.
HeadingRenders large text for titles.
IconRenders a visual icon within other components.
ImageAn image, primarily used for adding logos or other visual brand identity assets, or to accentuate other extension content.
InputA text input field where users can enter custom text values. Primarily used within Form components.
LineChart NEWA line chart used for visualizing time series plots or trend data.
LinkA clickable hyperlink for navigating to external and HubSpot app pages, or for triggering functions.
ListAn ordered or unordered list of items.
LoadingButtonSimilar to a Button component with additional loading state options.
LoadingSpinnerA visual indicator that the card is loading or processing.
ModalA pop-up overlay containing other components. Useful for short messages and action confirmation boxes. Can be opened with Button, LoadingButton, Link, Tag, and Image components.
MultiSelectA 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.
NumberInputA number input field. Primarily used within Form components.
PanelA panel that opens on the right side of the page, containing other components. Can be opened with Button, LoadingButton, Link, Tag, and Image components.
ProgressBarA visual representation of data in motion toward a positive or negative target. Can display both numbers and percentages.
RadioButtonA 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.
SelectA dropdown select field where a user can select a single value. To allow selecting multiple values, use MultiSelect instead.
StatisticsA visual spotlight of one or more data points. Includes numeric values and trend indicators (increasing/decreasing percentage).
StatusTagA visual indicator to display the current status of an item.
StepIndicatorA visual indicator to describe the progress within a multi-step process.
StepperInputSimilar to the NumberInput component, but this field enables users to increase or decrease the value by a set amount.
TableDisplays data in columns and rows. Tables can be paginated and sortable.
TagColored labels for categorizing information or other components. Can be static or clickable for triggering functions.
TextRenders text with formatting options.
TileA rectangular, bordered container for creating groups of related components.
TextAreaSimilar to Text, but for longer sets of text. Includes props for configuring field size, maximum characters, and resizeability.
ToggleA boolean toggle switch that can be configured with sizing and label options.
ToggleGroupA list of selectable checkboxes or radio buttons.

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.

ComponentDescription
CrmAssociationPivotA list of records associated with the currently dislplaying record, organized by their association label.
CrmAssociationPropertyListAn editable list of CRM properties belonging to a record associated with the currently displaying record.
CrmAssociationStageTracker NEWA lifecycle or pipeline stage progress bar that displays data from associated records. Can include a list of properties which can be edited inline.
CrmAssociationTableA table of records associated with the currently displaying record.
CrmDataHighlightA list of CRM properties belonging to the currently displaying record or another specified record.
CrmPropertyListAn editable list of CRM properties belonging to the currently displaying record or another specified record.
CrmReportDisplay an existing single object report. Includes filtering options, or can display all report data unfiltered.
CrmStageTrackerA lifecycle or pipeline stage progress bar with a list of properties.
CrmStatisticsDisplay 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 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.

ComponentDescription
CrmActionButtonA button that can execute a built-in set of CRM actions.
CrmActionLinkA clickable link that can execute a built-in set of CRM actions.
CrmCardActionsSmaller standalone or dropdown menu buttons that can contain multiple CRM actions.