Velocity X Components

Growth & Conversion

Scarcity / Stock Indicator

An honest remaining-count or demand signal for a product, seat or event listing, driven entirely by the real numbers you pass in — no manufactured countdown, so it never says 'almost gone' about something that isn't.

Subscription Included with the Velocity Components subscription.
bash
$ velocityx add scarcity-stock-indicator

Built for react. Needs react already installed as a peer dependency. An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.

Full docs for Scarcity / Stock Indicator →

Needs a licence key — subscribe here, then velocityx loginonce.

react v1.0.1 react
Scarcity / Stock Indicator

Only 3 seats left

6 people viewing this now

Props

NameTypeRequiredDefaultDescription
remainingnumberYes
totalnumberNo
lowStockThresholdnumberNo5
unitLabelstringNo'left'
recentActivitystringNo
classNamestringNo''

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text
components/velocity/scarcity-stock-indicator/ScarcityStockIndicator.tsx

Using the Scarcity / Stock Indicator component

Install it with velocityx add scarcity-stock-indicator. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

More from Growth & Conversion.