🚀 Advenx UI

A reusable React UI Component Library built with TypeScript.

📦 Installation

npm install advenx-ui

🔧 Usage

import { Button, H1, H2, Logo, RoundBadge, ScoreBox } from "advenx-ui";

function App() {
  return (
    <>
      <Logo width="200px" />
      <ScoreBox value={12} color="red" size="medium" />
      <RoundBadge currentRound={1} totalRounds={12} />
      <H1 text="Hello World" />
      <Button label="Click Me" />
    </>
  );
}

🎨 Components

🔘 Button

<Button label="Click Me" />

Props:

| Prop | Type | Description | | ------- | -------- | ------------- | | label | string | Button text | | onClick | function | Click handler | | variant | string | Button style |

🔤 H1

<H1 text="Heading" />

Props:

| Prop | Type | Description | | ----- | ------ | ------------ | | text | string | Heading text | | color | string | Text color |

🔤 H2

<H2 text="Subheading" color="green" />

Props:

| Prop | Type | Description | | ----- | ------ | ------------ | | text | string | Heading text | | color | string | Text color |

🎨 Logo (SVG Version)

<Logo width="150px" animation="glitch-img 9s infinite" />

Props:

| Prop | Type | Description | | --------- | ------ | ------------------------------------------------- | | width | string | Logo width (e.g., "150px", "200px") | | animation | string | Animation effect (e.g., "glitch-img 9s infinite") |

🛡️ RoundBadge

<RoundBadge currentRound={1} totalRounds={12} />

Props:

| Prop | Type | Description | | ------------ | ------ | ------------------------ | | currentRound | number | The current round number | | totalRounds | number | Total rounds in the game |

🔢 ScoreBox

<ScoreBox value={12} color="cyan" size="medium" name="Defenders" />

Props:

| Prop | Type | Description | | ----- | ------------------------------ | ----------------------------------- | | value | number | The score number to display | | name | string | Name attribute (Default: "Score") | | color | "red" | "cyan" | Theme color (Default: "red") | | size | "small" | "medium" | "large" | Size of the box (Default: "medium") |

📖 Storybook

Explore components visually (Coming soon / add your hosted link here)

⚡ Features

• Reusable UI components
• TypeScript support
• Easy to integrate
• Lightweight

🧠 Notes

• Import components directly from the package
• Ensure React is installed in your project

🙌 Contribution

Feel free to contribute and suggest improvements 🚀