| Accordion | A collapsible accordion section that can contain other components. |
| Alert | Alerts for indicating statuses and action outcomes, such as success and error messages. |
| AutoGrid | Arrange components into columns based on available space and specified column width restraints. |
| BarChart | 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. |
| ButtonRow | For rendering multiple buttons. |
| Checkbox | A single checkbox input. To display multiple checkboxes, use ToggleGroup instead. |
| CurrencyInput | An input field with currency formatting, symbols, and locale-specific display patterns. |
| 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. |
| Illustration | Renders an image from HubSpot’s illustration library. |
| Image | An image, primarily used for adding logos or other visual brand identity assets, or to accentuate other extension content. |
| Inline | Use flexbox styling to organize components in a horizontal row. |
| Input | A text input field where users can enter custom text values. Primarily used within Form components. |
| LineChart | 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. |
| SearchInput | An input field that enables users to search, including props for validation. |
| 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. |
| Tabs | Renders a tabbed container with options for visual styling, tooltips, and more. |
| 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. |
| Tooltip | A tooltip overlay that appears when hovering over the parent element. Supported in Button, Image, Link, LoadingButton, and Tag components. |
