Usage Stack, animated React component

Usage-based pricing you can see: every 10,000 requests is a block that drops into a bin, coloured by the tier it falls in. Slide the volume up and blocks rain in, slide it down and the newest pop, while the monthly price rolls with it and the blocks can be grabbed and thrown.

Pro
Pricing Sections
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Usage pricing

Each block is 10,000 requests.

$18per month

FreeGrowthScale

Requests / month120,000

0200k400k600k

Growthtier$0.146 per 1k

Props

Prop	Type	Default	What it does
defaultValue	number	120000	Requests per month to start from, rounded to the nearest 10,000 (0 to 600,000).
onChange	(requests: number, price: number) => void	—	Called whenever the volume changes, with the request count and the monthly price in dollars.
autoplay	boolean	false	Steps the volume through a few sample values every 2.6s until someone touches the slider or the bin. Off when reduced motion is preferred.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/usage-stack
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
usage-stack/
index.ts
usage-stack.tsx
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion matter-js
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { UsageStack } from "@/components/usage-stack";

export default function Page() {
  return (
    <main>
      <UsageStack />
    </main>
  );
}

Usage Stack, animated React component

Play with it

Usage pricing

Props

More pricing sections

Usage pricing