strivui 1.0.5 β 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -43
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,94 +1,127 @@
|
|
|
1
|
-
|
|
2
|
-
````markdown
|
|
3
1
|
# π StrivUI
|
|
4
2
|
|
|
5
|
-
**StrivUI** is a
|
|
3
|
+
**StrivUI** is a hybrid, utility-first UI component library built for **React**βdesigned to feel instantly familiar to both **React Native** and **Web developers**. Powered by **Tailwind CSS Classes Approach** and **TypeScript**, it offers a seamless design system for modern apps.
|
|
6
4
|
|
|
7
|
-
> Developed with β€οΈ by [
|
|
5
|
+
> Developed with β€οΈ by [Syed Abdullah Ali](https://github.com/syedabdullahali)
|
|
8
6
|
|
|
9
7
|
---
|
|
10
8
|
|
|
11
|
-
## β¨
|
|
9
|
+
## β¨ Why StrivUI?
|
|
12
10
|
|
|
13
|
-
- β‘ Utility-first
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
11
|
+
- β‘ **Utility-first styling** using Tailwind CSS Classes Approach
|
|
12
|
+
- π± **React Native-style components** like `<View />`, `<Text />`, and `<FlatList />`
|
|
13
|
+
- π **Web-native components** like `<Header />`, `<Section />`, and `<Card />`
|
|
14
|
+
- 𧩠Shared UI building blocks for fast development
|
|
15
|
+
- π οΈ Built with TypeScript β safe and scalable
|
|
16
|
+
- π» Lightweight and blazing fast
|
|
18
17
|
|
|
19
18
|
---
|
|
20
19
|
|
|
21
20
|
## π¦ Installation
|
|
22
21
|
|
|
23
|
-
Install
|
|
22
|
+
Install with npm or yarn:
|
|
24
23
|
|
|
25
24
|
```bash
|
|
26
|
-
npm install
|
|
25
|
+
npm install strivui
|
|
27
26
|
# or
|
|
28
|
-
yarn add
|
|
29
|
-
|
|
27
|
+
yarn add strivui
|
|
28
|
+
```
|
|
30
29
|
|
|
31
30
|
---
|
|
32
31
|
|
|
33
32
|
## π§ Usage
|
|
34
33
|
|
|
35
|
-
###
|
|
34
|
+
### JavaScript
|
|
36
35
|
|
|
37
36
|
```jsx
|
|
38
|
-
import { Button } from '
|
|
37
|
+
import { Button } from 'strivui';
|
|
39
38
|
|
|
40
39
|
function App() {
|
|
41
|
-
return <Button
|
|
40
|
+
return <Button className="bg-blue-500 text-white px-4 py-2 rounded">Click Me</Button>;
|
|
42
41
|
}
|
|
43
|
-
|
|
44
|
-
export default App;
|
|
45
42
|
```
|
|
46
43
|
|
|
47
|
-
###
|
|
44
|
+
### TypeScript
|
|
48
45
|
|
|
49
46
|
```tsx
|
|
50
|
-
import { Button } from '
|
|
47
|
+
import { Button } from 'strivui';
|
|
51
48
|
|
|
52
49
|
const App: React.FC = () => {
|
|
53
|
-
return <Button
|
|
50
|
+
return <Button className="bg-blue-500 text-white px-4 py-2 rounded">Click Me</Button>;
|
|
54
51
|
};
|
|
55
|
-
|
|
56
|
-
export default App;
|
|
57
52
|
```
|
|
58
53
|
|
|
59
54
|
---
|
|
60
55
|
|
|
61
|
-
## π§±
|
|
56
|
+
## 𧱠Component Categories
|
|
62
57
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
58
|
+
### π£ React NativeβInspired Components
|
|
59
|
+
These bring familiar primitives to web developers:
|
|
60
|
+
|
|
61
|
+
- `<View />`
|
|
62
|
+
- `<Text />`
|
|
63
|
+
- `<ScrollView />`
|
|
64
|
+
- `<Pressable />`
|
|
65
|
+
- `<TouchableOpacity />`
|
|
66
|
+
- `<FlatList />`
|
|
67
|
+
- `<SectionList />`
|
|
68
|
+
- `<Image />`
|
|
69
|
+
- `<ImageBackground />`
|
|
70
|
+
- `<ActivityIndicator />`
|
|
69
71
|
|
|
70
72
|
---
|
|
71
73
|
|
|
72
|
-
|
|
74
|
+
### π΅ Web Layout Components
|
|
75
|
+
Semantic tags for building structured, responsive UIs:
|
|
73
76
|
|
|
74
|
-
|
|
75
|
-
|
|
77
|
+
- `<Header />`
|
|
78
|
+
- `<Footer />`
|
|
79
|
+
- `<Main />`
|
|
80
|
+
- `<Section />`
|
|
81
|
+
- `<Navigation />`
|
|
82
|
+
- `<Container />`
|
|
83
|
+
- `<Card />`
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
### π’ Shared UI Components
|
|
88
|
+
Reusable building blocks for inputs, tables, modals, etc.:
|
|
89
|
+
|
|
90
|
+
- `<Button />`
|
|
91
|
+
- `<Input />`
|
|
92
|
+
- `<TextArea />`
|
|
93
|
+
- `<Select />`
|
|
94
|
+
- `<Link />`
|
|
95
|
+
- `<Modal />`
|
|
96
|
+
- `<Dialog />`
|
|
97
|
+
- `<Overlay />`
|
|
98
|
+
- `<Table />`, `<TableHead />`, `<TableBody />`, `<TableRow />`, `<TableHeaderCell />`, `<TableDataCell />`
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
102
|
+
## π¨ Styling & Theming
|
|
103
|
+
|
|
104
|
+
StrivUI uses **Tailwind CSS** under the hood. You can fully customize styles using Tailwind utility classes via `className`.
|
|
105
|
+
|
|
106
|
+
> Coming soon: `strive.config.js` for theme overrides like colors, spacing, font scale, and variants.
|
|
76
107
|
|
|
77
108
|
---
|
|
78
109
|
|
|
79
110
|
## π Documentation
|
|
80
111
|
|
|
81
|
-
Full documentation
|
|
112
|
+
Full documentation and interactive previews will be available at:
|
|
113
|
+
|
|
114
|
+
π [https://strivui.archstriv.com](https://strivui.archstriv.com)
|
|
82
115
|
|
|
83
116
|
---
|
|
84
117
|
|
|
85
|
-
## π§ͺ Development
|
|
118
|
+
## π§ͺ Local Development
|
|
86
119
|
|
|
87
|
-
|
|
120
|
+
To run the library locally:
|
|
88
121
|
|
|
89
122
|
```bash
|
|
90
|
-
git clone https://github.com/
|
|
91
|
-
cd
|
|
123
|
+
git clone https://github.com/syedabdullahali/StrivUI.git
|
|
124
|
+
cd StrivUI
|
|
92
125
|
npm install
|
|
93
126
|
npm run dev
|
|
94
127
|
```
|
|
@@ -97,16 +130,16 @@ npm run dev
|
|
|
97
130
|
|
|
98
131
|
## π€ Contributing
|
|
99
132
|
|
|
100
|
-
We
|
|
133
|
+
We love contributions!
|
|
101
134
|
|
|
102
135
|
1. Fork the repo
|
|
103
136
|
2. Create your feature branch: `git checkout -b feature/my-component`
|
|
104
137
|
3. Commit your changes: `git commit -m 'Add my component'`
|
|
105
|
-
4. Push to
|
|
106
|
-
5. Open a Pull Request
|
|
138
|
+
4. Push to GitHub: `git push origin feature/my-component`
|
|
139
|
+
5. Open a Pull Request π
|
|
107
140
|
|
|
108
141
|
---
|
|
109
142
|
|
|
110
143
|
## π License
|
|
111
144
|
|
|
112
|
-
MIT Β© 2025 [
|
|
145
|
+
MIT Β© 2025 [Syed Abdullah Ali](https://github.com/syedabdullahali)
|