Understanding Components
The 40 HubSpot UI Extension SDK components span eight categories. Understanding what each category offers helps you choose the right building blocks for your extensions — and helps you write prompts that guide the agent toward the components you want.
Layout
Section titled “Layout”Layout components control how other components are arranged on screen.
- Flex — the primary layout tool, arranges children horizontally or vertically with configurable gap, alignment, and wrapping
- Box — a simple container for grouping content with padding and borders
- Tile — a card-like container with a subtle background and rounded corners
- Divider — a horizontal or vertical line for separating sections
Use layout components in your prompts when you need specific arrangements: “use a Flex row with three Tiles side by side.”
Navigation
Section titled “Navigation”Components for user actions and movement between views.
- Button — primary, secondary, and destructive button variants for triggering actions
- Link — inline or standalone links for navigation
- StepIndicator — a multi-step progress indicator for wizards or flows
Data Display
Section titled “Data Display”The largest category, covering all the ways to show information.
- Text — headings, body text, and captions with variant support
- Tag and Badge — colored labels for status, categories, or counts
- DescriptionList — key-value pairs in a structured list (ideal for record details)
- Table — tabular data with columns and rows
- StatisticsItem — a large number with a label, perfect for KPIs and metrics
- Heading — section headings with multiple size levels
- Image — logos, icons, or media
Inputs
Section titled “Inputs”Form components for collecting data from users.
- Input — single-line text entry
- TextArea — multi-line text entry
- Select — dropdown selection with single or multi-select
- DateInput — date picker
- NumberInput — numeric entry with optional min/max
- Toggle — on/off switch
- Checkbox — single or grouped checkboxes
- RadioButton — single-select radio groups
Feedback
Section titled “Feedback”Components that communicate status and state.
- Alert — information, success, warning, and error banners
- LoadingSpinner — a spinner for loading states
- EmptyState — placeholder content shown when there is no data
- ProgressBar — a visual bar for completion percentage
Overlays
Section titled “Overlays”Components that layer on top of existing content.
- Modal — a dialog that appears over the page for confirmations or forms
- Panel — a slide-in side panel for detail views
- Tooltip — contextual help text that appears on hover
Charts
Section titled “Charts”Data visualization components.
- BarChart — vertical or horizontal bar charts for comparisons
- LineChart — line charts for trends over time
- DonutChart — donut/pie charts for proportional data
HubSpot-specific components that integrate with CRM functionality.
- CrmAssociationTable — displays associated records (e.g., contacts linked to a company)
- CrmActionButton — triggers CRM actions like creating records or sending emails
- CrmStageTracker — visualizes deal or ticket stages as a pipeline