# UI extensions with React (BETA)

**URL:** <https://community.hubspot.com/t/ui-extensions-with-react-beta/136263>\
**Category:** APIs & Integrations\
**Tags:** companies, timeline-and-extensions-apis\
**Created:** [July 15, 2025, 2:33pm UTC](https://community.hubspot.com/t/ui-extensions-with-react-beta/136263 "2025-07-15T14:33:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoelV](https://avatars.discourse-cdn.com/v4/letter/j/43a26b/32.png) [@JoelV](https://community.hubspot.com/u/JoelV)\
**Post date:** [July 15, 2025, 2:33pm UTC](https://community.hubspot.com/t/ui-extensions-with-react-beta/136263/1 "2025-07-15T14:33:26Z")

</div>

Hello

I noticed that it’s possible to create [custom app cards](https://developers.hubspot.com/docs/guides/crm/ui-extensions/create) with the UI extension and I’m currently trying to figure out if this could solve a problem for one of our clients.

Initial situation: In the company overview is a card called product history (see screenshot). Unfortunately, this card can’t be altered in any way. The client would like to have a card similar to the product history but with the possibility to filter certain properties stored on the article. The client doesn’t have any prodcuts - only articles as the deals get imported via API with articles connected to the deals.

Has someone already done something similar? Would the UI extension be the right tool to achieve this?

Many thanks!

---

<div class="post-metadata">

**Author:** ![MichaelMa](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@MichaelMa](https://community.hubspot.com/u/MichaelMa)\
**Post date:** [July 15, 2025, 4:49pm UTC](https://community.hubspot.com/t/ui-extensions-with-react-beta/136263/2 "2025-07-15T16:49:36Z")

</div>

Is the Product History card a built-in Hubspot card or a card someone else built? There wasn’t a screenshot so hard to tell what you want to see however, I feel like the caveat of whether or not it’s possible comes down to: can you pull the data you need via the API?

The APIs are robust but there are clear limits on certain types of data that it can pull. Most notable right now are teh engagement data is a bit cumbersome to retrieve.

If you can pull the data, then it comes down to how you want it to be displayed. The UI Extensions are robust but limited in how they display things to keep things “Hubspot”. I know I have some design annoyances I’ve encountered when building my custom cards.

---

<div class="post-metadata">

**Author:** ![JoelV](https://avatars.discourse-cdn.com/v4/letter/j/43a26b/32.png) [@JoelV](https://community.hubspot.com/u/JoelV)\
**Post date:** [July 18, 2025, 7:47am UTC](https://community.hubspot.com/t/ui-extensions-with-react-beta/136263/3 "2025-07-18T07:47:33Z")

</div>

Thank you Micheal, much appreciated!

I’m trying to get my head around this. If the responsivness isn’t as smooth as the HubSpot version it’s not a big deal as long as the client sees what he’d like to see 🙂

---

<div class="post-metadata">

**Author:** ![MichaelMa](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@MichaelMa](https://community.hubspot.com/u/MichaelMa)\
**Post date:** [July 18, 2025, 3:37pm UTC](https://community.hubspot.com/t/ui-extensions-with-react-beta/136263/4 "2025-07-18T15:37:12Z")

</div>

When I started building cards, I tried to start with one of the example projects to get a feel for things.

> **[GitHub - HubSpot/ui-extensions-examples: This repository contains code examples...](https://github.com/HubSpot/ui-extensions-examples/tree/main)**
>
> main

The Deals Summary project is a good example on how to pull data although I would recommend using GraphQL over the individual API requests (mostly because GraphQL is more efficient to retrieve lots of associated data).

> **[ui-extensions-examples/deals-summary at main · HubSpot/ui-extensions-examples](https://github.com/HubSpot/ui-extensions-examples/tree/main/deals-summary)**
>
> main/deals-summary

---

<div class="post-metadata">

**Author:** ![MichaelMa](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@MichaelMa](https://community.hubspot.com/u/MichaelMa)\
**Post date:** [July 15, 2025, 5:26pm UTC](https://community.hubspot.com/t/ui-extensions-with-react-beta/136263/5 "2025-07-15T17:26:09Z")

</div>

I found the product history card and it’s a Hubspot card. This is one of the cases where you can probably create something similar but not exactly the same and the custom version is probably going to be less optimized.

The Table component would be the same:

> **[Accounts Dashboard | HubSpot](https://app.hubspot.com/myaccounts?next=developerdocs&redirect=%2Fapps%2Fdeveloper-platform%2Fadd-features%2Fui-extensibility%2Fui-components%2Fstandard-components%2Ftable)**

The search (or just use a text component):

> **[Accounts Dashboard | HubSpot](https://app.hubspot.com/myaccounts?next=developerdocs&redirect=%2Fapps%2Fdeveloper-platform%2Fadd-features%2Fui-extensibility%2Fui-components%2Fstandard-components%2Fsearch-input)**

The dropdowns:

> **[Accounts Dashboard | HubSpot](https://app.hubspot.com/myaccounts?next=developerdocs&redirect=%2Fapps%2Fdeveloper-platform%2Fadd-features%2Fui-extensibility%2Fui-components%2Fstandard-components%2Fdropdown)**

The main issue is simply retrieving the data. You would need to:

1. Pull the schema data for Deals to get the stages.

2. Likely do a GraphQL request to pull the Company → Deal → Line Item data and then display the data in the table.

3. The search and filter (dropdown) wouldn’t be as responsive, probably, as th Hubspot version but it’s possible to replicate.
