alterui

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