Browsing the Gallery
The gallery is a visual reference of all 40 HubSpot UI Extension SDK components that the AI agent can use when building your extensions. Browse it to understand what building blocks are available and how they look.
Accessing the Gallery
Section titled “Accessing the Gallery”Click the Gallery tab in the top bar to open the component gallery. The tab shows the total number of components alongside a subtitle: “HubSpot UI Extension SDK preview components.”
Categories
Section titled “Categories”Components are organized into eight color-coded categories. Click a category chip to filter the gallery:
| Category | What It Covers |
|---|---|
| Layout | Structural components like Flex, Box, Tile, and Divider for arranging content |
| Navigation | Link, Button, and StepIndicator for actions and user flow |
| Data Display | Text, Tag, Badge, DescriptionList, Table, and more for showing information |
| Inputs | Input, Select, DateInput, Toggle, NumberInput, and other form elements |
| Feedback | Alert, LoadingSpinner, EmptyState, and ProgressBar for status communication |
| Overlays | Modal, Panel, and Tooltip for layered content |
| Charts | BarChart, LineChart, and DonutChart for data visualization |
| CRM | CrmAssociationTable, CrmActionButton, and CrmStageTracker for HubSpot-specific features |
Click All to clear the filter and see every component.
Searching
Section titled “Searching”Use the search field at the top of the gallery to find components by name or tag. The gallery filters in real time as you type.
Component Cards
Section titled “Component Cards”Each component is displayed as a card with:
- A rendered preview showing what the component looks like
- The component name below the preview
- A category tag indicating which group it belongs to
Click a component card to view more details about it.
The Info Banner
Section titled “The Info Banner”At the top of the gallery, an info banner reminds you that the gallery shows approximate previews. For the exact rendering, upload your app to HubSpot using the Upload button in the project view.