logo hereU.lib
    Quick search...K

    Input Components

    ButtonsDropdown MenuCheckboxFormInputRadioSwitchTextareaToggle

    Layout

    CardTabsAccordionCollapsible

    Data Display

    TableCarouselAvatarBadge

    Dialog

    Feedback

    ToastAlertProgress

    Navigation

    BreadcrumbNavigation Menu

    Overlay

    TooltipDrawerModel CardCommand

    Progress

    A component for displaying progress bars.

    0%

    Usage Examples

    Basic Usage

    Use the `Progress` component to display the progress bar that increases over time.

    import React, { useState, useEffect } from 'react';
import { Progress } from '@/components/Progress';

const ExampleProgress = () => {
const [progress, setProgress] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setProgress((prev) => {
      if (prev < 100) {
        return prev + 10;
      }
      clearInterval(interval);
      return 100;
    });
  }, 1000);

  return () => clearInterval(interval);
}, []);

return <Progress value={progress} />;
};

    Custom Styling

    You can customize the progress bar's appearance using the `className` prop.

    import { Progress } from '@/components/Progress';

const CustomProgress = () => {
return <Progress value={50} className="h-4 w-60 bg-blue-500" />;
};