<body>

  <h1>UiForge</h1>

  <h2>AutoCounter Component</h2>
  <p>
    <strong>UiForge</strong> provides a reusable <strong>AutoCounter</strong> React component for managing and displaying animated quantity counters on websites. It supports incrementing, decrementing, and customizable styles like font size and color. Ideal for use cases such as shopping carts, counters, or any UI where a numeric value needs to be displayed and animated.
  </p>

  <h3>Installation</h3>
  <p>You can install the <strong>uiforge</strong> component via npm or Yarn:</p>
  
  <pre><code>npm install uiforge</code></pre>
  <p>Or, using Yarn:</p>
  <pre><code>yarn add uiforge</code></pre>

  <h3>Usage</h3>
  <p>Once installed, you can use the <strong>AutoCounter</strong> component in your React app as follows:</p>

### Example

```jsx
import { AutoCounter } from "uiforge";

function App() {
  return (
    <div>
      <h1>Auto Counter Example</h1>
      <AutoCounter quantity={100} delay={20} size="24" color="blue" />
    </div>
  );
}

export default App;

<AutoCounter quantity={1000} delay={50} size="30" color="green" />;
```

  <h3>Props</h3>
  <table border="1">
    <thead>
      <tr>
        <th>Prop Name</th>
        <th>Type</th>
        <th>Description</th>
        <th>Default Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>quantity</code></td>
        <td><code>number</code></td>
        <td>The target quantity (a positive integer). This is the number the counter will increment towards.</td>
        <td><strong>Required</strong></td>
      </tr>
      <tr>
        <td><code>delay</code></td>
        <td><code>number</code></td>
        <td>The delay in milliseconds between each increment.</td>
        <td><code>10</code></td>
      </tr>
      <tr>
        <td><code>size</code></td>
        <td><code>string | number</code></td>
        <td>The font size of the displayed number. Can be a string (e.g., "18px") or a number (e.g., 18).</td>
        <td><code>"18"</code></td>
      </tr>
      <tr>
        <td><code>color</code></td>
        <td><code>string</code></td>
        <td>The color of the counter text. You can use any valid CSS color value.</td>
        <td><code>"black"</code></td>
      </tr>
    </tbody>
  </table>

  <h3>Contributing</h3>
  <p>If you would like to contribute to this project, please feel free to fork the repository and submit a pull request. All contributions are welcome!</p>

  <h3>License</h3>
  <p>This project is licensed under the ISC License - see the <code>LICENSE</code> file for details.</p>

  <h3>Bugs and Issues</h3>
  <p>If you encounter any issues or bugs, please file an issue on the GitHub repository:</p>
  <p><a href="https://github.com/lokeshkumar-2003/UiForge/issues">GitHub Issues</a></p>

  <h3>Authors</h3>
  <p>Lokesh Kumar - Initial work - <a href="https://github.com/lokeshkumar-2003">lokeshkumar-2003</a><br>
    Balaji - Contributor - <a href="https://github.com/balaji">balaji</a>
  </p>

</body>
```