Hudoro progress

Hudoro progress is a strict and customizable progress component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/progress

Instal package using yarn

  yarn add @hudoro/progress

Instal package using npm

  npm i @hudoro/progress

Usage/Examples (you can combine using icon package hudoro)

import React from "react";
import {Progress} from "@hudoro/progress";
import ReactDOM from "react-dom/client";

const App = () => (
  <div>
    <h1>Testing Progress Component</h1>
    <Progress value="100%" labelPosition="left" label="100%" color="blue-400" />
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/pagination

Props that you can pass to <Pagination {...props} />

| Prop Name | Value | required | | :------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | | labelPosition | "left" / "center" / "right" | false | | label | string | false | | color | "gray-50","gray-100","gray-200","gray-300","gray-400","gray-500","gray-600","gray-700","gray-800","gray-900","gray-950","red-50","red-100","red-200","red-300","red-400","red-500","red-600","red-700","red-800","red-900","red-950", "orange-50","orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-950","yellow-50","yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900","yellow-950","green-50","green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900","green-950", "blue-50""blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900","blue-950","purple-50","purple-100", "purple-200", "purple-300", "purple-400", "purple-500", "purple-600", "purple-700", "purple-800", "purple-900", "purple-950", | false | | value | "1%","2%","3%","4%","5%","6%","7%","8%","9%","10%","11%","12%","13%","14%","15%","16%","17%","18%","19%","20%","21%","22%","23%","24%","25%","26%","27%","28%","29%","30%","31%","32%","33%","34%","35%","36%","37%","38%","39%","40%","41%","42%","43%","44%","45%","46%","47%","48%","49%","50%","51%","52%","53%","54%","55%","56%","57%","58%","59%","60%","61%","62%","63%","64%","65%","66%","67%","68%","69%","70%","71%","72%","73%","74%","75%","76%","77%","78%","79%","80%","81%","82%","83%","84%","85%","86%","87%","88%","89%","90%","91%","92%","93%","94%","95%","96%","97%","98%","99%","100%" | false |