alterui/README.md

Hi there! I'm Lakshya Rohilla, a BCA student and this is my side project. I would love if you use it and give me feedback on what I should improve in this project.

# 🚀 AlterUI - A Lightweight React UI Library

Hi there! I'm Lakshya Rohilla, a BCA student and this is my side project. I would love if you use it and give me feedback on what I should improve in this project.

AlterUI is a simple and customizable React UI component library with reusable components like **Buttons, Badges, Alerts, Loaders, Inputs, Modals, Cards, Tables, TextAreas, Footers, Checkboxes, Dividers, and Switch Buttons**.

---


## 📥 Installation

AlterUI is available exclusively via **npm**:

```sh
npm install alterui
```

---


## 🔗 Usage

To use AlterUI components, **import both the components and the CSS styles**:

```jsx
import { 
  Button, Badge, Loader, Alert, Input, Modal, Card, Table, TextArea, Footer, 
  Checkbox, Divider, SwitchButton 
} from 'alterui';
import 'alterui/dist/styles.css'; // Import the pre-built CSS
```

---


## 📚 Components

### 🔘 Button

A customizable button with different styles.

#### ✅ Usage:

```jsx
<Button variant="primary">Click Me</Button>
<Button variant="danger" gradient>Delete</Button>
```

#### ✨ Props:
| Prop       | Type     | Default  | Description |
|------------|---------|----------|-------------|
| `variant`  | string  | `primary` | Button color style |
| `size`     | string  | `md`      | Button size (`sm`, `md`, `lg`) |
| `gradient` | boolean | `false`   | Apply a gradient background |
| `rounded`  | boolean | `true`    | Control button border radius |

---


### 🎖 Badge

Used to highlight statuses or labels.

#### ✅ Usage:

```jsx
<Badge variant="success">Active</Badge>
<Badge variant="danger" size="lg">Error</Badge>
```

#### ✨ Props:
| Prop       | Type     | Default  | Description |
|------------|---------|----------|-------------|
| `variant`  | string  | `gray`   | Badge color style |
| `size`     | string  | `md`      | Badge size (`sm`, `md`, `lg`) |
| `rounded`  | string  | `md`      | Border radius (`none`, `md`, `full`) |

---


### ⚠️ Alert

Displays messages for user notifications.

#### ✅ Usage:

```jsx
<Alert variant="warning" dismissible>⚠️ Warning: This action is irreversible!</Alert>
```

#### ✨ Props:
| Prop         | Type      | Default  | Description |
|-------------|----------|----------|-------------|
| `variant`   | string   | `info`   | Alert type (`success`, `warning`, `danger`, `info`) |
| `dismissible` | boolean | `false`  | Allows the alert to be closed |

---


### 🔄 Loader (Spinner)

Indicates loading state.

#### ✅ Usage:

```jsx
<Loader size="lg" color="success" />
```

#### ✨ Props:
| Prop    | Type    | Default  | Description |
|---------|--------|----------|-------------|
| `size`  | string | `md`      | Loader size (`sm`, `md`, `lg`) |
| `color` | string | `primary` | Loader color style |

---


### 📝 TextArea

Customizable multi-line text input.

#### ✅ Usage:

```jsx
<TextArea placeholder="Write your message..." />
<TextArea rows={5} size="lg" variant="success" placeholder="Success message" />
```

#### ✨ Props:
| Prop       | Type     | Default  | Description |
|------------|---------|----------|-------------|
| `rows`     | number  | `3`      | Number of rows in textarea |
| `size`     | string  | `md`      | Textarea size (`sm`, `md`, `lg`) |
| `variant`  | string  | `default` | Styling variant (`default`, `success`, `error`, `warning`) |
| `fullWidth` | boolean | `false`  | Makes the textarea full width |

---


### 🔲 Modal

A pop-up dialog for user actions.

#### ✅ Usage:

```jsx
<Modal isOpen={true} onClose={() => setIsOpen(false)} title="Example Modal">
  <p>This is a modal</p>
</Modal>
```

#### ✨ Props:
| Prop         | Type      | Default  | Description |
|-------------|----------|----------|-------------|
| `isOpen`    | boolean  | `false`  | Controls modal visibility |
| `title`     | string   | `Modal Title` | Title of the modal |
| `onClose`   | function | `null`   | Function to close modal |

---


### 📦 Card

A reusable container for content.

#### ✅ Usage:

```jsx
<Card 
  image="https://via.placeholder.com/300"
  title="Beautiful Sunset"
  description="A breathtaking view of the sun setting over the mountains."
  footer={<button className="bg-blue-500 text-white px-4 py-2 rounded">Learn More</button>}
/>
```

#### ✨ Props:
| Prop       | Type     | Default  | Description |
|------------|---------|----------|-------------|
| `image`    | string  | `null`   | Image URL |
| `title`    | string  | `null`   | Card title |
| `description` | string | `null` | Card description |
| `footer`   | node    | `null`   | Footer content (buttons, links, etc.) |

---


### 📊 Table

A responsive table for structured data.

#### ✅ Usage:

```jsx
const columns = [
  { header: "ID", key: "id" },
  { header: "Name", key: "name" },
  { header: "Age", key: "age" }
];

const data = [
  { id: 1, name: "John Doe", age: 28 },
  { id: 2, name: "Jane Smith", age: 34 }
];

<Table columns={columns} data={data} variant="striped" />
```

#### ✨ Props:
| Prop       | Type     | Default  | Description |
|------------|---------|----------|-------------|
| `columns`  | array   | `[]`     | Defines table headers |
| `data`     | array   | `[]`     | Table data rows |
| `variant`  | string  | `default` | Table styling (`default`, `striped`, `bordered`, `hover`) |

---


### 🔲 Checkbox (New)

A simple checkbox component.

#### ✅ Usage:

```jsx
<Checkbox label="Accept Terms" checked={true} onChange={() => {}} />
```

#### ✨ Props:
| Prop       | Type      | Default  | Description |
|------------|----------|----------|-------------|
| `label`    | string   | `""`     | Label text for the checkbox |
| `checked`  | boolean  | `false`  | Whether the checkbox is checked |
| `onChange` | function | `null`   | Function triggered on change |

---


### ➖ Divider (New)

A simple divider line.

#### ✅ Usage:

```jsx
<Divider />
<Divider orientation="vertical" dashed color="gray-400" />
```

#### ✨ Props:
| Prop          | Type    | Default  | Description |
|--------------|--------|----------|-------------|
| `orientation` | string | `horizontal` | Can be `horizontal` or `vertical` |
| `color`       | string | `gray-300` | Color of the divider |
| `dashed`      | boolean | `false`  | Whether the divider is dashed |

---


### 🔘 Switch Button (New)

A toggle switch.

#### ✅ Usage:

```jsx
<SwitchButton isOn={true} onToggle={() => {}} />
```

#### ✨ Props:
| Prop       | Type      | Default  | Description |
|------------|----------|----------|-------------|
| `isOn`     | boolean  | `false`  | Whether the switch is on |
| `onToggle` | function | `null`   | Function triggered on toggle |

---


## 📄 License

AlterUI is **free to use** but remains a **private library**. Redistribution or modification without permission is not allowed.

---


This updated README includes your **Checkbox, Divider, and SwitchButton** components. Let me know if you need any further refinements! 🚀