strivui/README.md

**StrivUI** is a modern, utility-first UI component library designed for building fast, beautiful, and accessible interfaces in **React** using both **TypeScript** and **JavaScript**.

<p align="center">
  <img src="https://res-console.cloudinary.com/dpbwcdytl/thumbnails/v1/image/upload/v1753722770/c3RyaXZ1aV9sb2dvX2syZHhicQ==/drilldown" width="250" alt="StrivUI Logo" />
</p>


**🚀StrivUI** is a hybrid, utility-first UI component library built for **React**, designed to feel instantly familiar to both **React Native** and **Web developers**. It follows a **class-based styling approach** and is written in **TypeScript**, delivering a seamless and consistent design system for modern applications.

Every component in StrivUI comes with **thoughtfully crafted default styles**, allowing you to build polished interfaces out of the box — while still offering full flexibility for customization.

> Developed with ❤️ by [Syed Abdullah Ali](https://github.com/syedabdullahali)

---


## ✨ Why StrivUI?

* ⚡ **Utility-first styling** using a class-based approach
* 📱 **React Native-style components** like `<View />`, `<Text />`, and `<FlatList />`
* 🌐 **Web-native components** like `<Header />`, `<Section />`, and `<Card />`
* 🧩 Shared UI building blocks for fast development
* 🛠️ Built with TypeScript — safe and scalable
* 💻 Lightweight and blazing fast

---


## 📦 Installation

Install with npm or yarn:

```bash
npm install strivui
# or
comingSoon-> yarn add strivui
```

---


## 🔧 Usage

### JavaScript

```jsx
import { Button } from 'strivui';

function App() {
  return <Button className="bg-blue-500 text-white px-4 py-2 rounded  hover:bg-blue-400">Click Me</Button>;
}
```

### TypeScript

```tsx
import { Button } from 'strivui';

const App: React.FC = () => {
  return <Button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400">Click Me</Button>;
};
```

---


## 🧱 Component Categories

### 🟣 React Native–Inspired Components

Familiar primitives brought to the web:

* `<View />`
* `<Text />`
* `<ScrollView />`
* `<Pressable />`
* `<TouchableOpacity />`
* `<FlatList />`
* `<SectionList />`
* `<Image />`
* `<ImageBackground />`
* `<ActivityIndicator />`

---


### 🔵 Web Layout Components

Semantic elements for responsive structure:

* `<Header />`
* `<Footer />`
* `<Main />`
* `<Section />`
* `<Navigation />`
* `<Container />`
* `<Card />`

---


### 🟢 Shared UI Components

Reusable components for forms, modals, tables, etc.:

* `<Button />`
* `<Input />`
* `<TextArea />`
* `<Select />`
* `<Link />`
* `<Modal />`
* `<Dialog />`
* `<Overlay />`
* `<Table />`, `<TableHead />`, `<TableBody />`, `<TableRow />`, `<TableHeaderCell />`, `<TableDataCell />`

---


## 🎨 Styling & Theming

StrivUI uses a **utility-first, class-based styling approach**. You can customize components using `className` with your own styles or design system.

> Coming soon: `strive.config.js` for overriding design tokens like colors, spacing, font scale, and variants.

---


## 📚 Documentation

Full documentation and interactive previews will be available at:

📘 [https://css\_striv\_ui.com](https://css_striv_ui.com)

---


## 🧪 Local Development

To run the library locally:

```bash
git clone https://github.com/syedabdullahali/StrivUI.git
cd StrivUI
npm install
npm run dev
```

---


## 🤝 Contributing

We love contributions!

1. Fork the repo
2. Create your feature branch: `git checkout -b feature/my-component`
3. Commit your changes: `git commit -m 'Add my component'`
4. Push to GitHub: `git push origin feature/my-component`
5. Open a Pull Request 🚀

---


## 📄 License

MIT © 2025 [Syed Abdullah Ali](https://github.com/syedabdullahali)

---