Pace Dial

A flat, printed instrument dial set on a card: hairline ticks, italic serif numerals, a mono label and unit, a large serif readout and a slim needle and progress arc in the theme primary, with the red line drawn in the primary as well. Every colour comes from theme tokens, so it follows light and dark mode and the palette picker. When it scrolls into view it runs an instrument self-test (full-scale sweep, fall back, settle on the live reading) and repeats every eight seconds. It renders the settled reading without motion when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add pace-dial

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/pace-dial.tsx.
3. Paste the code.

Usage

import { PaceDial } from "@/components/ui/pace-dial";

export default function Example() {
  return (
    <div className="flex items-center justify-center p-8">
      <PaceDial variant="boost" className="max-w-[340px]" />
    </div>
  );
}

Props