The Basic Progress Bar component allows you to visually represent the progress of a task or process, providing users with real-time feedback on completion status. This section provides an introduction to the Basic Progress Bar and how to use it effectively.

            <div class="flex flex-col gap-2">
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-1/2">
        </div>
    </div>
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-2/3">
        </div>
    </div>
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4">
        </div>
    </div>
</div>
        

The Basic Progress Bar is a fundamental component for enhancing user experience by providing clear feedback on task progress. By following the steps outlined above, you can easily integrate it into your project and tailor it to meet your specific requirements.

The Progress Bar with Label component combines a visual progress bar with a text label to provide users with a clear indication of progress. This section introduces the Progress Bar with Label and how to integrate it into your project effectively.

            <div class="flex flex-col gap-2">
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-4">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-1/2">
            50%
        </div>
    </div>
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-4">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-2/3">
            60%
        </div>
    </div>
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-4">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4">
            70%
        </div>
    </div>
</div>
        

The Progress Bar with Label component is a valuable addition to your user interface, offering both visual and textual progress updates. By following the steps outlined above, you can seamlessly integrate it into your project and tailor it to suit your specific requirements.

The "Progress Bar Height" section explains how to control the height of progress bars to suit your project's design and layout. Customizing the height allows you to integrate progress bars seamlessly into your application's visual hierarchy.

            <div class="flex flex-col gap-2">
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-1">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-1/2">
        </div>
    </div>
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-2/3">
        </div>
    </div>
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-3">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4">
        </div>
    </div>
</div>
        

The "Progress Bar Height" section has demonstrated how to control the height of progress bars in your project. By following these guidelines and maintaining consistency, you can create visually appealing and accessible progress bars that align with your application's design.

The "Progress Bar Color" section explains how to customize the colors of progress bars to enhance your application's visual appeal and convey information effectively. You can choose from a variety of colors to match your brand's identity or signify different stages of a process.

            <div class="flex flex-col gap-2">
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-1/2">
        </div>
    </div>
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-2/3 bg-success">
        </div>
    </div>
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4 bg-warning">
        </div>
    </div>
    <div data-tw-merge class="w-full h-2 bg-slate-200 rounded dark:bg-black/20">
        <div data-tw-merge role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4 bg-danger">
        </div>
    </div>
</div>
        

The "Progress Bar Color" section has shown you how to customize the colors of progress bars to align with your application's design and convey meaning effectively. By choosing the right colors and considering accessibility, you can enhance the user experience and make progress bars an integral part of your application's UI.