Skip to content
RevTurbine Docs

QuotaMeterSlot

A usage meter that visualizes consumption against limits. Supports progress bar, numeric counter, and circular gauge display styles with automatic color thresholds.

Content fields: header, usage_current, usage_limit, cta_label, display_style (progress_bar | numeric_counter | circular_gauge), show_at

Usage

Section titled “Usage”

A live, editable example — edit the code (or switch the demo user) and the preview re-runs:

App.tsx
import { Slot } from "@revturbine/sdk";
import { DemoApp } from "./DemoApp";


// Alice has consumed 20 of her 30 core credits — the meter renders her usage.
export default function App() {
  return (
    <DemoApp user="user_alice">
      <Slot id="sidebar_usage_widget" surfaceTemplateIds={["usage_counter"]} />
    </DemoApp>
  );
}

Opens a live, editable sandbox with the published SDK.

The QuotaMeterSlot renders automatically when the decision engine selects a usage_counter template. The meter changes color automatically based on usage percentage — green below 70%, amber at 70-90%, red above 90%. The show_at threshold hides the meter until usage reaches that percentage.

Related: Playground → Quota Meter · API Reference