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

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

​
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.
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.
Last modified on February 17, 2026