> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt > Use this file to discover all available pages before exploring further. --- id: 0549b0ac-ff08-4704-bcd6-59d3bfee2dc0 --- # UI extension components > Learn about the components that you can use to build UI extensions. export const FilterTable = ({children, placeholder = "Search", className = "", ignoreColumns = []}) => { const [searchTerm, setSearchTerm] = useState(''); const [originalTable, setOriginalTable] = useState(null); const [filteredRowsCount, setFilteredRowsCount] = useState(0); const tableRef = useRef(null); useEffect(() => { if (tableRef.current) { const table = tableRef.current.querySelector('table'); if (table) { setOriginalTable(table.cloneNode(true)); } } }, [children]); useEffect(() => { if (!originalTable || !tableRef.current) return; const table = tableRef.current.querySelector('table'); if (!table) return; const tbody = table.querySelector('tbody'); if (!tbody) return; const originalRows = Array.from(originalTable.querySelectorAll('tbody tr')); const headerRow = originalTable.querySelector('thead tr'); const headers = Array.from(headerRow.querySelectorAll('th')).map(th => th.textContent.trim()); const ignoreIndices = ignoreColumns.map(colName => headers.findIndex(header => header === colName)).filter(index => index !== -1); const filteredRows = searchTerm ? originalRows.filter(row => { const cells = Array.from(row.querySelectorAll('td')); const searchableText = cells.filter((cell, index) => !ignoreIndices.includes(index)).map(cell => cell.textContent).join(' ').toLowerCase(); return searchableText.includes(searchTerm.toLowerCase()); }) : originalRows; setFilteredRowsCount(filteredRows.length); tbody.innerHTML = ''; if (filteredRows.length === 0 && searchTerm) { const emptyRow = document.createElement('tr'); const emptyCell = document.createElement('td'); emptyCell.colSpan = headers.length; emptyCell.className = 'filter-table-empty-state'; emptyCell.innerHTML = `No results found for ${searchTerm}`; emptyRow.appendChild(emptyCell); tbody.appendChild(emptyRow); } else { filteredRows.forEach(row => { tbody.appendChild(row.cloneNode(true)); }); } const thead = table.querySelector('thead'); if (thead) { const headerCells = thead.querySelectorAll('th'); headerCells.forEach(th => { if (searchTerm && filteredRows.length === 0) { th.style.color = '#CCCCCC'; th.style.display = 'none'; } else { th.style.color = ''; th.style.display = 'table-cell'; } }); } }, [searchTerm, originalTable, ignoreColumns]); return
setSearchTerm(e.target.value)} maxLength={75} className="filter-table-input" />
{children}
; }; 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. **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 `cards`, `settings`, and/or `pages` directory. 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](#standard-components) are imported from `'@hubspot/ui-extensions'` * [CRM data](#crm-data-components) and [CRM action components](#crm-action-components) are imported from `'@hubspot/ui-extensions/crm'` ```js theme={null} import { Alert, Text } from "@hubspot/ui-extensions"; import { CrmAssociationPivot, CrmActionLink } from "@hubspot/ui-extensions/crm"; ``` For a visual library of these UI components, check out HubSpot's [Figma Design Kit](/apps/developer-platform/add-features/ui-extensions/ui-components/figma-design-kit). ## 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](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/accordion) | A collapsible accordion section that can contain other components. | | [Alert](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert) | Alerts for indicating statuses and action outcomes, such as success and error messages. | | [AutoGrid](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/autogrid) | A layout component for arranging components into columns based on available space and specified column width restraints. | | [BarChart](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/charts/bar-chart) | A bar chart used for visualizing categorical data. | | [Box](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box) | A layout component used with [Flex](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex). Learn more about [managing extension layout](/apps/developer-platform/add-features/ui-extensions/ui-components/manage-ui-extension-layout). | | [Button](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button) | Buttons that enable users to perform actions, such as sending or retrieving data. | | [ButtonRow](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button-row) | For rendering multiple buttons. | | [Checkbox](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/checkbox) | A single checkbox input. To display multiple checkboxes, use [ToggleGroup](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle-group) instead. | | [CurrencyInput](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/currency-input) | An input field with currency formatting, symbols, and locale-specific display patterns. | | [DateInput](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/date-input) | A field that enables users to select a date. | | [DescriptionList](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/description-list) | Displays pairs of custom labels and values, similar to how HubSpot properties appear in the left sidebar of CRM records. | | [Divider](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/divider) | A horizontal line for separating components within an extension. | | [Dropdown](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/dropdown) | A dropdown menu for selecting values, styled as either buttons or hyperlinks. | | [EmptyState](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/empty-state) | A labeled illustration to indicate a component without content. | | [ErrorState](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/error-state) | Labeled illustrations to indicate errors. | | [Flex](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex) | A layout component that wraps components in a `div` set to `display=flex`. Use this component and [Box](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box) to [manage extension layout](/apps/developer-platform/add-features/ui-extensions/ui-components/manage-ui-extension-layout). | | [Form](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form) | A form for submitting data, which can contain other related components such as [Input](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/input), [Select](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/select), and [Button](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button). | | [Heading](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/heading) | Renders large text for titles. | | [Icon](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/icon) | Renders a visual icon within other components. | | [Illustration](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/illustration) | Renders an image from HubSpot's illustration library. | | [Image](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/image) | An image, primarily used for adding logos or other visual brand identity assets, or to accentuate other extension content. | | [Inline](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/inline) | A layout component to arrange components in a horizontal row. | | [Input](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/input) | A text input field where users can enter custom text values. Primarily used within [Form](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form) components. | | [LineChart](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/charts/line-chart) | A line chart used for visualizing time series plots or trend data. | | [Link](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link) | A clickable hyperlink for navigating to external and HubSpot app pages, or for triggering functions. | | [List](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/list) | An ordered or unordered list of items. | | [LoadingButton](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/loading-button) | Similar to a [Button](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button) component with additional loading state options. | | [LoadingSpinner](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/loading-spinner) | A visual indicator that the card is loading or processing. | | [Modal](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/modal) | A pop-up overlay containing other components. Useful for short messages and action confirmation boxes. Can be opened with [Button](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button), [LoadingButton](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/loading-button), [Link](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link), [Tag](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tag), and [Image](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/image) components. | | [MultiSelect](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/multi-select) | A dropdown select field where users can select multiple values. To allow only one value to be selected, use [Select](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/select) instead. Primarily used within [Form](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form) components. | | [NumberInput](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/number-input) | A number input field. Primarily used within [Form](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form) components. | | [Panel](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/panel) | A panel that opens on the right side of the page, containing other components. Can be opened with [Button](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button), [LoadingButton](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/loading-button), [Link](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link), [Tag](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tag), and [Image](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/image) components. | | [ProgressBar](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/progress-bar) | A visual representation of data in motion toward a positive or negative target. Can display both numbers and percentages. | | [RadioButton](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/radio-button) | A radio select button. If you want to include more than two radio buttons, or are building a [Form](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form), it's recommended to use [ToggleGroup](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle-group) instead. | | [ScoreCircle](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/scorecircle) | Visualize performance metrics, completion percentages, or quality scores with color-coded circles. | | [SearchInput](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/search-input) | An input field that enables users to search, including props for validation. | | [Select](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/select) | A dropdown select field where a user can select a single value. To allow selecting multiple values, use [MultiSelect](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/multi-select) instead. | | [Spacer](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/spacer) | A layout component that adds vertical spacing between components. | | [Statistics](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/statistics) | A visual spotlight of one or more data points. Includes numeric values and trend indicators (increasing/decreasing percentage). | | [StatusTag](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/status-tag) | A visual indicator to display the current status of an item. | | [StepIndicator](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/step-indicator) | A visual indicator to describe the progress within a multi-step process. | | [StepperInput](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/stepper-input) | Similar to the [NumberInput](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/number-input) component, but this field enables users to increase or decrease the value by a set amount. | | [Tabs](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tabs) | Renders a tabbed container with options for visual styling, tooltips, and more. | | [Table](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/table) | Displays data in columns and rows. Tables can be paginated and sortable. | | [Tag](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tag) | Colored labels for categorizing information or other components. Can be static or clickable for triggering functions. | | [Text](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text) | Renders text with formatting options. | | [Tile](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tile) | A rectangular, bordered container for creating groups of related components. | | [TextArea](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text-area) | Similar to [Text](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text), but for longer sets of text. Includes props for configuring field size, maximum characters, and resizeability. | | [Toggle](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle) | A boolean toggle switch that can be configured with sizing and label options. | | [ToggleGroup](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle-group) | A list of selectable checkboxes or radio buttons. | | [Tooltip](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tooltip) | A tooltip overlay that appears when hovering over the parent element. Supported in [Button](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button), [Image](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/image), [Link](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link), [LoadingButton](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/loading-button), and [Tag](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tag) components. | ## 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](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/overview). These components are imported from `@hubspot/ui-extensions/crm`. | Component | Description | | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [CrmAssociationPivot](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-association-pivot) | A list of records associated with the currently displaying record, organized by their association label. | | [CrmAssociationPropertyList](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-association-property-list) | An editable list of CRM properties belonging to a record associated with the currently displaying record. | | [CrmAssociationStageTracker](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-association-stage-tracker) | 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](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-association-table) | A table of records associated with the currently displaying record. | | [CrmDataHighlight](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-data-highlight) | A list of CRM properties belonging to the currently displaying record or another specified record. | | [CrmPropertyList](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-property-list) | An editable list of CRM properties belonging to the currently displaying record or another specified record. | | [CrmReport](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-report) | Display an existing single object report. Includes filtering options, or can display all report data unfiltered. | | [CrmStageTracker](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-stage-tracker) | A lifecycle or pipeline stage progress bar with a list of properties. | | [CrmStatistics](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-statistics) | 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](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/overview). CRM action components are imported from `@hubspot/ui-extensions/crm`. | Component | Description | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | | [CrmActionButton](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/crm-action-button) | A button that can execute a built-in set of CRM actions. | | [CrmActionLink](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/crm-action-link) | A clickable link that can execute a built-in set of CRM actions. | | [CrmCardActions](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/crm-card-actions) | Smaller standalone or dropdown menu buttons that can contain multiple CRM actions. |