Progress Orbit

Security

Identity posture

MFA

SAML

Audit

3 checks verified

"use client";

import { ShieldCheck } from "lucide-react";

import { ProgressOrbit } from "@/components/matos-ui/progress-orbit";

export function ProgressOrbitDemo() {
  return (
    <div className="flex w-full justify-center">
      <ProgressOrbit
        className="max-w-[360px]"
        label="Security"
        description="Identity posture"
        value={72}
        tone="primary"
        icon={<ShieldCheck />}
        milestones={[
          { value: 30, label: "MFA" },
          { value: 55, label: "SAML" },
          { value: 80, label: "Audit" },
        ]}
        footer="3 checks verified"
      />
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/progress-orbit.json

Usage

import { ProgressOrbit } from "@/components/matos-ui/progress-orbit"

<ProgressOrbit
  className="max-w-56"
  label="Launch"
  description="Checklist"
  value={86}
  tone="primary"
  milestones={[
    { value: 25, label: "Plan" },
    { value: 60, label: "QA" },
    { value: 90, label: "Ship" },
  ]}
/>

Reference

ProgressOrbit Props

Prop	Type	Default	Description
`value`	`number`	-	Current progress value.
`max`	`number`	`100`	Max value used to compute percent.
`label`	`ReactNode`	-	Card title and accessible label.
`description`	`ReactNode?`	-	Optional short description.
`icon`	`ReactNode?`	-	Optional header icon.
`tone`	`"neutral" \| "primary" \| "muted" \| "destructive"`	`"neutral"`	Subtle progress accent tone.
`suffix`	`string`	`"%"`	Value suffix.
`milestones`	`ProgressOrbitMilestone[]`	`[]`	Compact threshold chips.
`footer`	`ReactNode?`	-	Optional footer text or content.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Internal spacing and ring stroke.

ProgressOrbitMilestone

Field	Type	Description
`value`	`number`	Threshold value.
`label`	`ReactNode`	Label shown in the milestone chip.

Also exported: AnimatedProgressValue, progressOrbitVariants, and related types.