react-apps-ui 1.0.7 → 1.0.9
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 +94 -0
- package/package.json +49 -28
package/README.md
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# React Apps UI 🚀
|
|
2
|
+
|
|
3
|
+

|
|
4
|
+

|
|
5
|
+

|
|
6
|
+
|
|
7
|
+
Beautiful, highly customizable UI components designed for a seamless developer experience across **Web and Mobile**.
|
|
8
|
+
|
|
9
|
+
Inspired by the Shadcn/UI philosophy, **this is not a traditional component library you install via npm.** Instead, it is a universal collection of reusable, premium components that download directly into your codebase, adapting to your specific framework and styling engine.
|
|
10
|
+
|
|
11
|
+
## The Philosophy
|
|
12
|
+
|
|
13
|
+
You should own your UI. Traditional NPM libraries lock you into their design systems, making deep customization a nightmare. This library takes a fundamentally different approach:
|
|
14
|
+
|
|
15
|
+
- **Total Ownership:** Components are copied directly into your local workspace. You have full control over the styling, physics, and logic.
|
|
16
|
+
- **Universal & Engine Agnostic:** Built from the ground up to natively support:
|
|
17
|
+
- **Web:** React + Tailwind CSS (Next.js, Vite, etc.)
|
|
18
|
+
- **Mobile:** React Native + NativeWind (Tailwind CSS)
|
|
19
|
+
- **Mobile (Zero-Dependency):** React Native + standard `StyleSheet`
|
|
20
|
+
- **Smart CLI:** The `react-apps-ui` CLI recursively resolves nested dependencies (like icons or loaders), respects your path aliases, and automatically installs required NPM packages based on your selected engine.
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Prerequisites
|
|
25
|
+
|
|
26
|
+
Before using the CLI, ensure you have an existing React (Web) or React Native (Expo) project.
|
|
27
|
+
|
|
28
|
+
**Path Aliases:** This library uses the `@/` path alias to ensure imports never break if you move files around. Make sure your `tsconfig.json` (or `jsconfig.json`) at the root of your project is configured to support it:
|
|
29
|
+
|
|
30
|
+
```json
|
|
31
|
+
{
|
|
32
|
+
"compilerOptions": {
|
|
33
|
+
"baseUrl": ".",
|
|
34
|
+
"paths": {
|
|
35
|
+
"@/*": ["./src/*"]
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
_(If you do not use a `src` folder, change `"./src/_"`to`"./_"`)_
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## Quick Start
|
|
46
|
+
|
|
47
|
+
Get up and running in a fresh project in seconds.
|
|
48
|
+
|
|
49
|
+
### 1. Initialize the workspace
|
|
50
|
+
|
|
51
|
+
Run the `init` command at the root of your project. This interactive command lets you select your target platform (Web or Mobile) and styling engine, creates your base theme, and sets up your utility files.
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
npx react-apps-ui@latest init
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### 2. Add a component
|
|
58
|
+
|
|
59
|
+
Use the `add` command to pull a component into your project. The CLI will automatically fetch the exact code needed for your specific engine, grab any sub-dependencies, and install necessary NPM packages.
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
npx react-apps-ui@latest add action-button
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### 3. Import and customize
|
|
66
|
+
|
|
67
|
+
The code is now yours! You will find it beautifully organized in your project folder. Import it and modify it however you like.
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import { ActionButton } from "@/components/ui/action-button";
|
|
71
|
+
|
|
72
|
+
export default function App() {
|
|
73
|
+
return (
|
|
74
|
+
<ActionButton onPress="{()"> console.log("Pressed!")}>
|
|
75
|
+
Click Me
|
|
76
|
+
</ActionButton>
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## Folder Architecture
|
|
84
|
+
|
|
85
|
+
To keep your project pristine and scalable, the CLI intelligently routes components into domain-specific directories within your app:
|
|
86
|
+
|
|
87
|
+
- `components/ui/` - Core architectural building blocks (buttons, inputs, cards).
|
|
88
|
+
- `components/loaders/` - Foundational animations, skeletons, and loading states.
|
|
89
|
+
- `components/custom/` - Highly specialized, compound UI elements.
|
|
90
|
+
- `utils/` - Shared helpers and style-merging utilities optimized for your specific engine.
|
|
91
|
+
|
|
92
|
+
## License
|
|
93
|
+
|
|
94
|
+
This project is licensed under the [MIT License](LICENSE).
|
package/package.json
CHANGED
|
@@ -1,28 +1,49 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "react-apps-ui",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "react-apps-ui",
|
|
3
|
+
"version": "1.0.9",
|
|
4
|
+
"description": "A universal, Shadcn-inspired UI component CLI for Web, React Native, and Expo.",
|
|
5
|
+
"author": "Anand Vyas",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"react",
|
|
9
|
+
"react-native",
|
|
10
|
+
"expo",
|
|
11
|
+
"nextjs",
|
|
12
|
+
"tailwind",
|
|
13
|
+
"tailwindcss",
|
|
14
|
+
"nativewind",
|
|
15
|
+
"shadcn",
|
|
16
|
+
"shadcn-ui",
|
|
17
|
+
"ui",
|
|
18
|
+
"components",
|
|
19
|
+
"cli"
|
|
20
|
+
],
|
|
21
|
+
"homepage": "https://github.com/anandvyas2021/react-apps-ui-registry#readme",
|
|
22
|
+
"repository": {
|
|
23
|
+
"type": "git",
|
|
24
|
+
"url": "git+https://github.com/anandvyas2021/react-apps-ui-registry.git"
|
|
25
|
+
},
|
|
26
|
+
"bugs": {
|
|
27
|
+
"url": "https://github.com/anandvyas2021/react-apps-ui-registry/issues"
|
|
28
|
+
},
|
|
29
|
+
"main": "dist/index.js",
|
|
30
|
+
"bin": {
|
|
31
|
+
"react-apps-ui": "./dist/index.js"
|
|
32
|
+
},
|
|
33
|
+
"scripts": {
|
|
34
|
+
"build": "tsc",
|
|
35
|
+
"dev": "tsx src/index.ts",
|
|
36
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
37
|
+
},
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"chalk": "^5.6.2",
|
|
40
|
+
"commander": "^14.0.3",
|
|
41
|
+
"prompts": "^2.4.2"
|
|
42
|
+
},
|
|
43
|
+
"devDependencies": {
|
|
44
|
+
"@types/node": "^22.20.2",
|
|
45
|
+
"@types/prompts": "^2.4.9",
|
|
46
|
+
"tsx": "^4.23.13",
|
|
47
|
+
"typescript": "^7.0.2"
|
|
48
|
+
}
|
|
49
|
+
}
|