Vitals Board

A square canvas drawn in isometric projection on the page paper: a cluster of floating wireframe cubes, five stacked scan planes, or a breathing height-field mesh. Strong lines take the theme primary and faint ones the foreground, so it follows light, dark and every palette. It pauses when off screen and draws a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add vitals-board

Manual

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

Usage

import { VitalsBoard } from "@/components/ui/vitals-board";

export default function Example() {
  return (
    <div className="flex min-h-[400px] items-center justify-center">
      <VitalsBoard variant="flow" />
    </div>
  );
}

Props