zerozeeker 1.0.0 → 1.0.2
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 +200 -0
- package/dist/index.js +18 -14
- package/package.json +4 -3
package/README.md
ADDED
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
# ZeroZeeker Components
|
|
2
|
+
|
|
3
|
+
Official CLI for installing production-ready UI components into your React or Next.js projects.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/zerozeeker)
|
|
6
|
+
[](https://www.npmjs.com/package/zerozeeker)
|
|
7
|
+
[](https://nodejs.org/)
|
|
8
|
+
[](LICENSE)
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## What You Get
|
|
13
|
+
|
|
14
|
+
A complete collection of pixel-perfect UI components designed for modern web applications. All components are:
|
|
15
|
+
|
|
16
|
+
- Built with React and TypeScript
|
|
17
|
+
- Styled with Tailwind CSS
|
|
18
|
+
- Production-ready and battle-tested
|
|
19
|
+
- Fully customizable and composable
|
|
20
|
+
- Accessible by default
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Install Components
|
|
25
|
+
|
|
26
|
+
Install any ZeroZeeker component with a single command:
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npx zerozeeker add rainbow-button
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
No configuration needed. It just works.
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## Available Components
|
|
37
|
+
|
|
38
|
+
Current components in the ZeroZeeker library:
|
|
39
|
+
|
|
40
|
+
- `rainbow-button` - Animated gradient border with glow effect
|
|
41
|
+
- `shimmer-button` - Moving border animation
|
|
42
|
+
- `magnetic-button` - Cursor-following interaction
|
|
43
|
+
- `expand-button` - Expansion animation
|
|
44
|
+
- `flip-button` - 3D flip transition
|
|
45
|
+
- `circle-reveal-button` - Reveal animation
|
|
46
|
+
|
|
47
|
+
**Browse all components:**
|
|
48
|
+
```bash
|
|
49
|
+
npx zerozeeker list
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
More component types being added regularly.
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## Commands
|
|
57
|
+
|
|
58
|
+
### Install a Component
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
npx zerozeeker add <component-name>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Examples:
|
|
65
|
+
```bash
|
|
66
|
+
npx zerozeeker add rainbow-button
|
|
67
|
+
npx zerozeeker add shimmer-button
|
|
68
|
+
npx zerozeeker add magnetic-button
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### List All Components
|
|
72
|
+
|
|
73
|
+
```bash
|
|
74
|
+
npx zerozeeker list
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Get Command Help
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npx zerozeeker --help
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## Requirements
|
|
86
|
+
|
|
87
|
+
Before using ZeroZeeker components, ensure you have:
|
|
88
|
+
|
|
89
|
+
- Node.js 18 or higher
|
|
90
|
+
- An existing React or Next.js project
|
|
91
|
+
- shadcn/ui initialized in your project
|
|
92
|
+
- Tailwind CSS configured
|
|
93
|
+
|
|
94
|
+
### Setup shadcn/ui
|
|
95
|
+
|
|
96
|
+
If you haven't initialized shadcn/ui yet:
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
npx shadcn-ui@latest init
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## How to Use Installed Components
|
|
105
|
+
|
|
106
|
+
After installing a component with the CLI, simply import and use it:
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
import { RainbowButton } from '@/components/ui/rainbow-button'
|
|
110
|
+
|
|
111
|
+
export default function App() {
|
|
112
|
+
return (
|
|
113
|
+
<RainbowButton onClick={() => alert('Clicked!')}>
|
|
114
|
+
Click Me
|
|
115
|
+
</RainbowButton>
|
|
116
|
+
)
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
All components follow shadcn/ui conventions. Import from `@/components/ui/<component-name>`.
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## Customization
|
|
125
|
+
|
|
126
|
+
Every component is fully customizable:
|
|
127
|
+
|
|
128
|
+
```tsx
|
|
129
|
+
import { RainbowButton } from '@/components/ui/rainbow-button'
|
|
130
|
+
|
|
131
|
+
<RainbowButton
|
|
132
|
+
size="lg"
|
|
133
|
+
className="w-full"
|
|
134
|
+
>
|
|
135
|
+
Custom Button
|
|
136
|
+
</RainbowButton>
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
Components inherit Tailwind CSS styling. Modify the component file in your project to customize.
|
|
140
|
+
|
|
141
|
+
---
|
|
142
|
+
|
|
143
|
+
## Troubleshooting
|
|
144
|
+
|
|
145
|
+
### Command not found
|
|
146
|
+
|
|
147
|
+
Ensure Node.js 18+ is installed:
|
|
148
|
+
```bash
|
|
149
|
+
node --version
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### "zerozeeker not recognized"
|
|
153
|
+
|
|
154
|
+
Use the full npx command:
|
|
155
|
+
```bash
|
|
156
|
+
npx zerozeeker list
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### shadcn/ui not initialized
|
|
160
|
+
|
|
161
|
+
Initialize shadcn/ui first:
|
|
162
|
+
```bash
|
|
163
|
+
npx shadcn-ui@latest init
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### Component won't install
|
|
167
|
+
|
|
168
|
+
Verify the exact component name:
|
|
169
|
+
```bash
|
|
170
|
+
npx zerozeeker list
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
Then install using the exact name shown.
|
|
174
|
+
|
|
175
|
+
---
|
|
176
|
+
|
|
177
|
+
## About ZeroZeeker
|
|
178
|
+
|
|
179
|
+
ZeroZeeker is a modern design system for developers who value:
|
|
180
|
+
|
|
181
|
+
- Clean, readable code
|
|
182
|
+
- Bold, intentional typography
|
|
183
|
+
- Generous spacing and breathing room
|
|
184
|
+
- Components that just work
|
|
185
|
+
|
|
186
|
+
Every component is designed to be a solid foundation you can build upon.
|
|
187
|
+
|
|
188
|
+
---
|
|
189
|
+
|
|
190
|
+
## Links
|
|
191
|
+
|
|
192
|
+
- Website: [zerozeeker.com](https://www.zerozeeker.com/)
|
|
193
|
+
- GitHub: [github.com/ZERO-DAWN-X/zero-zeeker-frontend](https://github.com/ZERO-DAWN-X/zero-zeeker-frontend)
|
|
194
|
+
- NPM: [@latest](https://www.npmjs.com/package/zerozeeker)
|
|
195
|
+
|
|
196
|
+
---
|
|
197
|
+
|
|
198
|
+
## License
|
|
199
|
+
|
|
200
|
+
MIT
|
package/dist/index.js
CHANGED
|
@@ -16,46 +16,50 @@ var COMPONENTS = [
|
|
|
16
16
|
"index"
|
|
17
17
|
];
|
|
18
18
|
var program = new Command();
|
|
19
|
-
program.name("zerozeeker").description("CLI for installing ZeroZeeker UI components").version("1.0.0");
|
|
19
|
+
program.name("zerozeeker").description("CLI for installing ZeroZeeker UI components - because life is too short for boring interfaces").version("1.0.0");
|
|
20
20
|
program.command("add <component>").description("Add a component from ZeroZeeker registry").action((component) => {
|
|
21
21
|
if (!COMPONENTS.includes(component)) {
|
|
22
|
-
console.error(chalk.red(
|
|
23
|
-
console.log(chalk.dim("\
|
|
22
|
+
console.error(chalk.red(`Component "${component}" does not exist in this dimension.`));
|
|
23
|
+
console.log(chalk.dim("\nHere are the components that actually exist:"));
|
|
24
24
|
COMPONENTS.filter((c) => c !== "index").forEach((c) => {
|
|
25
25
|
console.log(chalk.cyan(` - ${c}`));
|
|
26
26
|
});
|
|
27
|
+
console.log(chalk.dim("\nPro tip: Copy-paste is your friend."));
|
|
27
28
|
process.exit(1);
|
|
28
29
|
}
|
|
29
30
|
const url = `${REGISTRY_URL}/${component}.json`;
|
|
30
|
-
const spinner = ora(`Installing ${chalk.cyan(component)}
|
|
31
|
+
const spinner = ora(`Installing ${chalk.cyan(component)}... hold tight`).start();
|
|
31
32
|
try {
|
|
32
33
|
execSync(`npx shadcn@latest add ${url}`, {
|
|
33
34
|
stdio: "inherit",
|
|
34
35
|
encoding: "utf-8"
|
|
35
36
|
});
|
|
36
37
|
spinner.stop();
|
|
37
|
-
console.log(chalk.green(
|
|
38
|
+
console.log(chalk.green(`Successfully installed ${component}. Now go make something beautiful.`));
|
|
38
39
|
} catch (error) {
|
|
39
40
|
spinner.stop();
|
|
40
|
-
console.error(chalk.red(
|
|
41
|
+
console.error(chalk.red(`Failed to install ${component}. The internet might be having a bad day.`));
|
|
42
|
+
console.log(chalk.dim("Try again, or check your network connection."));
|
|
41
43
|
process.exit(1);
|
|
42
44
|
}
|
|
43
45
|
});
|
|
44
46
|
program.command("list").description("List all available components").action(() => {
|
|
45
|
-
console.log(chalk.bold("\
|
|
47
|
+
console.log(chalk.bold("\nZeroZeeker UI Components\n"));
|
|
48
|
+
console.log(chalk.dim("Modern, polished components that make users actually want to interact.\n"));
|
|
46
49
|
const descriptions = {
|
|
47
|
-
"rainbow-button": "Animated rainbow gradient border
|
|
48
|
-
"shimmer-button": "Moving border glow effect
|
|
49
|
-
"magnetic-button": "Cursor-following magnetic
|
|
50
|
-
"expand-button": "Expanding pill
|
|
51
|
-
"flip-button": "3D flip card
|
|
52
|
-
"circle-reveal-button": "Icon to pill expansion
|
|
50
|
+
"rainbow-button": "Animated rainbow gradient border - for when one color just will not cut it",
|
|
51
|
+
"shimmer-button": "Moving border glow effect - subtle flex, maximum impact",
|
|
52
|
+
"magnetic-button": "Cursor-following magnetic effect - it literally chases your mouse",
|
|
53
|
+
"expand-button": "Expanding pill animation - small to big, just like your startup",
|
|
54
|
+
"flip-button": "3D flip card effect - because flat is boring",
|
|
55
|
+
"circle-reveal-button": "Icon to pill expansion - the element of surprise"
|
|
53
56
|
};
|
|
54
57
|
COMPONENTS.filter((c) => c !== "index").forEach((component) => {
|
|
55
58
|
console.log(chalk.cyan(` ${component}`));
|
|
56
59
|
console.log(chalk.dim(` ${descriptions[component]}
|
|
57
60
|
`));
|
|
58
61
|
});
|
|
59
|
-
console.log(chalk.dim("Install with: ") + chalk.white("npx zerozeeker add <component
|
|
62
|
+
console.log(chalk.dim("Install any component with: ") + chalk.white("npx zerozeeker add <component>"));
|
|
63
|
+
console.log(chalk.dim("More components coming soon. Ship fast. Look good doing it.\n"));
|
|
60
64
|
});
|
|
61
65
|
program.parse();
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zerozeeker",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "CLI for installing ZeroZeeker UI components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
7
7
|
"zerozeeker": "dist/index.js"
|
|
8
8
|
},
|
|
9
9
|
"files": [
|
|
10
|
-
"dist"
|
|
10
|
+
"dist",
|
|
11
|
+
"README.md"
|
|
11
12
|
],
|
|
12
13
|
"scripts": {
|
|
13
14
|
"build": "tsup index.ts --format esm --dts --clean",
|
|
@@ -37,7 +38,7 @@
|
|
|
37
38
|
},
|
|
38
39
|
"repository": {
|
|
39
40
|
"type": "git",
|
|
40
|
-
"url": "https://
|
|
41
|
+
"url": "https://g/ZERO-DAWN-X/zero-zeeker-frontend.git",
|
|
41
42
|
"directory": "cli-unscoped"
|
|
42
43
|
}
|
|
43
44
|
}
|