Skip to main content
Clever Ops

Centrifugal Governor

A working centrifugal governor for React, drive the power lever, flyweights rise and the valve trims the spin until it settles governed. ARIA slider semantics, Tailwind tokens.

Preview & code

Loading Centrifugal Governor preview

Installation

pnpm dlx shadcn@latest add @cleverui/centrifugal-governor

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { CentrifugalGovernor } from '@/components/ui/centrifugal-governor'
Exampletsx
import { CentrifugalGovernor } from '@/components/ui/centrifugal-governor'

export default function CentrifugalGovernorDemo() {
  return (
    <div className="mx-auto w-full max-w-xl px-4 py-10 sm:px-6 sm:py-14">
      <p className="mb-4 font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
        Spectacle · closed-loop control
      </p>
      <h2 className="mb-6 text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
        Push the lever. Watch the machine fight back.
      </h2>
      <CentrifugalGovernor
        defaultPower={55}
        caption="WATT GOVERNOR · NO 4"
        ariaLabel="Centrifugal steam governor"
      />
      <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
        Drag the power handle or use arrow keys. Flyweights rise, the valve
        trims the load, and the spin settles governed, feedback you can see.
      </p>
    </div>
  )
}

API reference

CentrifugalGovernor accepts the following props.

PropTypeDefaultDescription
defaultPowernumber55initial lever setting as a percentage (clamped 0-100)
captionstring'WATT GOVERNOR · NO 4'mono micro-label on the panel
ariaLabelstring'Centrifugal governor'accessible name for the power lever slider

…plus everything from React.HTMLAttributes<HTMLDivElement>: className, event handlers, aria attributes and the rest pass straight through.

Frequently asked questions

How do I install the Centrifugal Governor component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/centrifugal-governor`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Centrifugal Governor require?

Centrifugal Governor uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Centrifugal Governor to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services