> ## Documentation Index
> Fetch the complete documentation index at: https://engage-docs.frigade.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Progress Badge

> Display a user's progress through a Flow

<Frame className="h-96 items-center">
  <img
    src="https://mintcdn.com/frigade-docs/7j7O5wbAiLBomVEP/images/components/progress-badge.svg?fit=max&auto=format&n=7j7O5wbAiLBomVEP&q=85&s=268f826aae66c1096fecfe00d390a6b7"
    style={{
  width: "220px",
}}
    width="220"
    height="67"
    data-path="images/components/progress-badge.svg"
  />
</Frame>

## About this component

The Progress Badge component is unlike other components in that it doesn't have its own Flow. It exists to remind a user where they left off in an existing Flow (e.g. Checklist), and to help get them jump back in and complete it.

## Demo

* See progress badges in action in our [live demo](https://demo.frigade.com/checklists)

## Installation

<Tabs>
  <Tab title="Code">
    ```tsx theme={"system"}
    import * as Frigade from '@frigade/react';

    const App = () => {
      return (
        <Frigade.ProgressBadge flowId="my-flow-id" />
      );
    };
    ```
  </Tab>
</Tabs>

## Customization

To learn about how to customize Frigade components, see the [customization documentation](/sdk/styling/) and [examples](https://demo.frigade.com) of custom themes in action.

## SDK Properties