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.
Files changed (3) hide show
  1. package/README.md +200 -0
  2. package/dist/index.js +18 -14
  3. 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
+ [![npm](https://img.shields.io/npm/v/zerozeeker?style=flat-square&color=181825)](https://www.npmjs.com/package/zerozeeker)
6
+ [![npm downloads](https://img.shields.io/npm/dm/zerozeeker?style=flat-square&logo=npm&color=181825)](https://www.npmjs.com/package/zerozeeker)
7
+ [![Node.js](https://img.shields.io/badge/Node.js-20.9+-339933?style=flat-square&logo=node.js&logoColor=white)](https://nodejs.org/)
8
+ [![MIT License](https://img.shields.io/badge/License-MIT-blue?style=flat-square)](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(`\u274C Component "${component}" not found.`));
23
- console.log(chalk.dim("\nAvailable components:"));
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)}...`).start();
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(`\u2705 Successfully installed ${component}!`));
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(`\u274C Failed to install ${component}`));
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("\n\u{1F4E6} Available ZeroZeeker Components:\n"));
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 button",
48
- "shimmer-button": "Moving border glow effect button",
49
- "magnetic-button": "Cursor-following magnetic button",
50
- "expand-button": "Expanding pill button",
51
- "flip-button": "3D flip card button",
52
- "circle-reveal-button": "Icon to pill expansion button"
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>\n"));
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.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://github.com/ZERO-DAWN-X/zero-zeeker-frontend.git",
41
+ "url": "https://g/ZERO-DAWN-X/zero-zeeker-frontend.git",
41
42
  "directory": "cli-unscoped"
42
43
  }
43
44
  }