Agrobank UI Library

Agrobank UI Library is a user interface library designed specifically for Agrobank. It provides a set of convenient and stylish components to quickly build interfaces that align with the corporate design.

📦 Installation

Install the package via npm, yarn or bun:

npm install local-agro-ui

or

yarn add local-agro-ui

or

bun add local-agro-ui

🚀 Usage

Import the necessary components into your project:

import React from "react";
import { Button, Input } from "local-agro-ui";

const App = () => {
  return (
    <div>
      <h1>Welcome to Agrobank UI</h1>
      <Input placeholder="Enter text" />
      <Button onClick={() => alert("Clicked!")}>Click me</Button>
    </div>
  );
};

export default App;

🎨 Available Components

| Component | Description | |------------------|---------------------------------------------------------------------------| | Button | A customizable button with various styles and events | | IconButton | A button that contains only an icon, used for compact actions | | Input | Input field with custom parameters | | Table | A table with sorting and filtering capabilities | | Checkbox | A component that allows users to select one or multiple options | | EmptyData | Displays a placeholder message or graphic when no data is available | | Pagination | Provides navigation controls for splitting content into pages | | Popover | A small overlay element that shows additional information on demand | | Skeleton | A placeholder element used to indicate content loading | | TabsSwitcher | Enables switching between different content sections or views | | Toggle | A switch component for toggling between two states | | Tooltip | Displays contextual information when hovering over an element | | Modal | A modal dialog that overlays content on the screen | | Drawer | A modal that slides in from the right side of the screen | | Tag | A chip-like element used to display counts, statuses, or tags | | TextArea | A multi-line input field that allows users to enter extended text content | | OTPInput | OTP input | | Select | A dropdown component that allows users to choose one or multiple options | | DatePicker | A component that allows users to select a single date | | RangePicker | A component that allows users to select a date range |

⚙️ Customization

Components support custom styles via className and props. For example:

<Button size="xl" color="MainGreen">
  Click me
</Button>

📄 License

This package is intended for Agrobank.

If you need additional details or examples, feel free to ask! 🚀