arman-ui

A lightweight React UI component library (CommonJS).

Install

npm install arman-ui

React 17+ must be installed in your project as a peer dependency.

Components

Button

const { Button } = require("my-ui-lib");

<Button variant="primary" size="md" onClick={() => alert("clicked!")}>
  Click Me
</Button>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | primary | secondary | danger | ghost | primary | Visual style | | size | sm | md | lg | md | Size of the button | | disabled | boolean | false | Disables the button | | onClick | function | — | Click handler |

Input

const { Input } = require("arman-ui");

<Input
  label="Email"
  placeholder="[email protected]"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  error="Invalid email"
/>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | — | Label above the input | | placeholder | string | "" | Placeholder text | | value | string | — | Controlled value | | onChange | function | — | Change handler | | type | string | text | Input type | | error | string | — | Error message shown below | | disabled | boolean | false | Disables the input |

Modal

const { Modal, Button } = require("arman-ui");

<Modal
  isOpen={open}
  onClose={() => setOpen(false)}
  title="Confirm Action"
  footer={<Button onClick={() => setOpen(false)}>Close</Button>}
>
  <p>Are you sure you want to proceed?</p>
</Modal>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | isOpen | boolean | — | Controls visibility | | onClose | function | — | Called on close / Escape key | | title | string | — | Modal heading | | children | ReactNode | — | Body content | | footer | ReactNode | — | Footer content (buttons etc.) |

Card

const { Card } = require("arman-ui");

<Card title="Hello" subtitle="A simple card" hoverable>
  <p>Card body content goes here.</p>
</Card>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | — | Card heading | | subtitle | string | — | Subtitle below heading | | children | ReactNode | — | Body content | | footer | ReactNode | — | Footer content | | hoverable | boolean | false | Adds hover lift effect |