🚀 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:

npm install alterui

🔗 Usage

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

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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

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:

<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:

<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:

<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! 🚀