npm package: @oneport365/ui-lib
Description: [![npm version](https://img.shields.io/npm/v/@oneport365/ui-lib.svg?style=flat-square)](https://www.npmjs.com/package/@oneport365/ui-lib) [![npm downloads](https://img.shields.io/npm/dm/@oneport365/ui-lib.svg?style=flat-square)](https://www.npmjs.com/pack
Author: Chigozie Ezenwa
Latest version: 0.1.9

# @oneport365/ui-lib

[![npm version](https://img.shields.io/npm/v/@oneport365/ui-lib.svg?style=flat-square)](https://www.npmjs.com/package/@oneport365/ui-lib)
[![npm downloads](https://img.shields.io/npm/dm/@oneport365/ui-lib.svg?style=flat-square)](https://www.npmjs.com/package/@oneport365/ui-lib)
[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE)

---

A collection of reusable, beautiful React UI components designed for speed, accessibility, and developer happiness.  
Built with ⚡️ React, 🧩 TailwindCSS, and 🔀 Radix UI.

---

## ✨ Features

- 🎨 **Fully Customizable** — Built with TailwindCSS
- ♿ **Accessible** — Powered by Radix UI primitives
- 🧩 **Composable** — Easy to extend and style
- 🔥 **Ready for Production**

---

## 📦 Installation

Install via npm:

```bash
npm install @oneport365/ui-lib
```

or with Yarn:

```bash
yarn add @oneport365/ui-lib
```

---

## 🚀 Usage

### 1. Import the CSS

You **must import** the library’s CSS file inside your root component (`App.tsx`, `index.tsx`, etc.):

```tsx
import "@oneport365/ui-lib/dist/index.css";
```

This ensures all components are styled correctly.

### 2. Import and use components

Example usage:

```tsx
import { Button } from "@oneport365/ui-lib";

export default function App() {
  return (
    <div className="p-4">
      <Button>Click me</Button>
    </div>
  );
}
```

---

## 📚 Components

| Component                  | Description                           |
| :------------------------- | :------------------------------------ |
| `Button`                   | Standard button with variants         |
| `TextField`                | Accessible TextField component        |
| `Textarea`                 | Accessible Textarea component         |
| `Checkbox`                 | Accessible Checkbox component         |
| `Radio`                    | Accessible Radio component            |
| `Modal`                    | Accessible Modal component            |
| `FormField`                | Accessible FormField component        |
| `Select`                   | Accessible Select component           |
| `PhoneNumberInput`         | Accessible PhoneNumberInput component |
| `Breadcrumb`               | Accessible Breadcrumb component       |
| _...and more coming soon!_ |

---

## 🎨 Theming & Styling

All components use TailwindCSS utility classes by default.

You can easily customize components by:

- Passing `className` props
- Extending Tailwind's theme
- Wrapping components in your own variants

Example:

```tsx
<Button className="bg-blue-600 hover:bg-blue-700 text-white">Custom Styled Button</Button>
```

---

## 🛠 Requirements

- React `^18`
- TailwindCSS (optional but recommended)
- TypeScript support included but not mandatory

---

## 📄 License

This project is licensed under the [MIT License](LICENSE).

---

# 🧐 Important

✅ **Always remember to import the CSS!**

```tsx
import "@oneport365/ui-lib/dist/index.css";
```

Otherwise, your components might not be styled properly!

---