> For the complete documentation index, see [llms.txt](https://developer.harness.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.harness.io/sandbox/custom-integration-showcase/hsu-calculator.md).

# HSU Calculator

A calculator card that estimates monthly Harness Service Unit consumption by module and tier, live on the pricing page.

## What it does

Harness prices most modules in Harness Service Units (HSUs), and the number a customer needs depends on which modules they use and how heavily. Rather than send a reader to a spreadsheet or a sales call to work that out, the calculator sits directly on the pricing page: select modules and usage, and it estimates monthly HSU consumption on the spot.

## Why it is built this way

This integration predates the GitBook migration. It began as a React component on the Docusaurus site. Moving it required a full rebuild, not a port: GitBook integrations render server-side inside GitBook's own runtime, with no client-side React tree and no DOM access from the integration's own code. The rebuild kept full parity with the original calculations and tiers while fitting that model — a state change is dispatched as an action, the integration returns new layout, and GitBook re-renders. The block itself takes no data as a prop; the tier and category set (`defaultTier`, `defaultCategory`, `startOpen`) are the only author-facing options, and the rate data is compiled into the webframe directly so it never travels through GitBook's ContentKit payload on every render.

It is a useful worked example of the harder end of the migration: not every custom component moved cleanly, and this one is proof that a full rebuild is sometimes the right call rather than forcing an old architecture into a new runtime.

## This is what it looks like in action

{% @harness-hsu-calculator/hsu-calculator startOpen="true" %}

That is the real block, installed on this space and rendering live, not a screenshot or a description of one. It starts expanded here (`startOpen="true"`) so the interaction is visible immediately; on the pricing page it starts collapsed, since a reader arrives there already looking for it.

## Where it is also live

Embedded on the [Flex pricing page](https://developer.harness.io/harness-platform/subscriptions-and-licenses/flex-pricing#hsu-calculator), under Platform, collapsed by default.

{% @harness-feedback/feedback module="sandbox" pagePath="sandbox/hsu-calculator" %}