Progress

Import

import {
  Progress,
  ProgressLabel,
  ProgressTrack,
  ProgressIndicator,
  ProgressValue,
  ProgressFloatingValue,
  ProgressCircle,
  ProgressHalfCircle,
} from "@countryclub/ui-react";

Default

Text Right

Show the value beside the track — alone, or under a label row.

Text Bottom

The value sits below the track, aligned to the end.

Text Top Floating

A tooltip-like bubble floats above the track and follows the progress.

Text Bottom Floating

The floating value bubble below the track.

Circle

A circular progress ring with a centered value, in three sizes.

Circle with Label

Add a short caption above the centered value.

Half Circle

A gauge-style semicircle arc, in three sizes.

Half Circle with Label

The gauge with a caption and value inside the arc.