Loading...

I'll create a progress bar example using the HeroUI Progress component based on the specifications provided in the openui.yaml file. I'll also make sure to follow the instructions in the instructions.md file for setting up the project.

Let's create a progress bar example using the HeroUI Progress component:

This example demonstrates various features of the HeroUI Progress component:

1. A basic progress bar that automatically increments.
2. A colored progress bar (green for success).
3. A progress bar with a visible value label.
4. A progress bar with custom styling (secondary color, large size, and large radius).
5. An indeterminate progress bar for when progress can't be calculated.
6. A striped progress bar for a different visual style.

Each progress bar is labeled for clarity, and the component is wrapped in a responsive container. The progress automatically increases over time to demonstrate the component's functionality.

The example follows the HeroUI setup instructions by including the necessary Tailwind configuration and wrapping the application with the HeroUIProvider. It also uses the Progress component from the @heroui/progress package as specified in the openui.yaml file.

You can now run this example in your Next.js application to see the HeroUI Progress components in action. Let me know if you need any modifications or have any questions!