Demos

A biological age of 48 against a chronological age of 38.

"use client"

import { AgeBar } from "@workspace/ui/predict/age-bar"

export function AgeBarDemo() {
  return (
    <div className="w-full max-w-xl">
      <AgeBar biologicalAge={48} chronologicalAge={38} />
    </div>
  )
}

Usage

Use the age bar to compare a person's biological age with their real age at a glance. For the full picture with domains and severity, use the Bio Clock.

Import it from @workspace/ui/predict/age-bar.

Anatomy

• Markers — One for each age, with the number and its label above a bar. The older age is always on the right.
• Range — The shaded band between the two markers, with one tick for each year of difference.
• Badge — How much faster or slower the person is ageing, above the range.
• Scale — The tick ruler along the bottom, labelled 0 and 100.

Reading the badge

The badge divides the older age by the younger one.

Notes

• The markers are not placed by age along the 0 to 100 scale. They sit 30 points either side of the middle, and move out to 35 points as the gap grows from 15 to 17.5 years. This keeps the labels apart at any age.
• The markers, range, and badge animate in from the middle when the component mounts.
• The bar fills its container's width. Set the width on the parent.

Examples

Aging slower

A biological age below the chronological age.

"use client"

import { AgeBar } from "@workspace/ui/predict/age-bar"

export function AgeBarSlower() {
  return (
    <div className="w-full max-w-xl">
      <AgeBar biologicalAge={32} chronologicalAge={40} />
    </div>
  )
}

On pace

The same age for both.

"use client"

import { AgeBar } from "@workspace/ui/predict/age-bar"

export function AgeBarOnPace() {
  return (
    <div className="w-full max-w-xl">
      <AgeBar biologicalAge={45} chronologicalAge={45} />
    </div>
  )
}

Props

AgeBar