UI components overview (BETA)
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 imported from
'@hubspot/ui-extensions' - CRM data and CRM action components are imported 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 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. |
| BarChartNEW | A bar chart used for visualizing categorical data. |
| 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. |
| Icon | Renders a visual icon within other components. |
| 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. |
| LineChartNEW | A line chart used for visualizing time series plots or trend data. |
| Link | A clickable hyperlink for navigating to external and HubSpot app pages, or for triggering functions. |
| List | An ordered or unordered list of items. |
| LoadingButton | Similar to a Button component with additional loading state options. |
| LoadingSpinner | A visual indicator that the card is loading or processing. |
| Modal | A 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. |
| 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 with Button, LoadingButton, 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). |
| StatusTag | A visual indicator to display the current status of an item. |
| 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 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. |
| CrmAssociationStageTracker NEW | A lifecycle or pipeline stage progress bar that displays data from associated records. Can include a list of properties which can be edited inline. |
| 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 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. |
Thank you for your feedback, it means a lot to us.