FeedbackAvailable

Exercise Track

Level-style progress for a practice attempt: one segment per exercise, done in mint, the current one lifted in lilac.

Exercise 3 of 6

Exercise 3 of 6 · answered

Exercise 18 of 24

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/exercise-track.json

Usage

Import the component into your project and keep the source code under your control.

tsx

import { ExerciseTrack } from "@/components/ui/exercise-track";
export default function Demo() {
  return (
    <div className="grid w-full max-w-xl gap-6">
      <ExerciseTrack total={6} current={2} label="Exercise 3 of 6" />
      <ExerciseTrack total={6} current={2} completed={3} label="Exercise 3 of 6 · answered" />
      <ExerciseTrack total={24} current={17} label="Exercise 18 of 24" />
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
total / current / completed	number / number / number	Required	Exercise count, zero-based index on screen and answered exercises (defaults to current).
label	string	Required	Visible text that also names the progressbar, for example "Exercise 2 of 6".

Accessibility

Rules that should remain intact when adapting the component to a product.

One progressbar named by the visible label, with value, maximum and value text; segments are decorative.

State is carried by position and the label, not only by color.