A collection of example projects showcasing app cards built with HubSpot's UI Extensions. These examples demonstrate how to build customized experiences that integrate seamlessly into the HubSpot CRM interface.
HubSpot UI Extensions enable developers to create custom app cards that display directly within HubSpot's interface. These cards can:
- Display data from third-party systems
- Allow users to perform actions without leaving HubSpot
- Provide customized experiences tailored to specific workflows
- Integrate with CRM records, preview panels, help desk, and sales workspaces
App cards are built using React and HubSpot's UI Extensions SDK, giving you access to HubSpot's design system and data components while maintaining a native user experience.
This repository contains four distinct projects that showcase different aspects of UI Extensions:
📊 Charts
Build customized data visualizations by fetching data from third-party systems and displaying them as interactive charts within HubSpot records.
A comprehensive example featuring both frontend and backend components that integrates with the Open Library API to search for books, manage a shopping cart, and generate HubSpot deals.
Industry-specific app card examples including Education, Manufacturing, and Healthcare use cases, demonstrating real-world applications across different sectors.
An interactive product showcase combining image carousels with tabbed interfaces to display detailed product specifications and information.
- Active HubSpot account
- HubSpot CLI installed globally
- Basic knowledge of React and TypeScript
-
Clone this repository
git clone https://github.com/hubspotdev/ui-extensions-examples cd ui-extensions-examples -
Choose a project Navigate to any of the example directories and follow the individual README instructions.
-
Set up HubSpot CLI
npm install -g @hubspot/cli@latest hs account auth
-
Install and deploy From within any project directory:
hs project install-deps hs project upload hs project dev
- App Cards Overview - Comprehensive guide to building app cards
- UI Extensions SDK - Technical documentation for the SDK
- UI Components - Available components and design system
- Building with React - Landing page for React-based app development
- HubSpot Developers YouTube Channel - Tutorials, demos, and developer content
- HubSpot Developer Community - Interact and engage with other HubSpot developers
- HubSpot CLI Documentation - Command-line tools for development
- Developer Account Setup - Get started with HubSpot development
These examples are maintained by the HubSpot Developer Relations team. Each project includes detailed setup instructions and code comments to help you understand the implementation patterns.
- HubSpot Developer Forums - Community support and discussions
- HubSpot Developer Documentation - Complete developer resources
Ready to build your own app cards? Start with one of the examples above and customize it for your specific use case!