ZeroZeeker Components

Official CLI for installing production-ready UI components into your React or Next.js projects.

What You Get

A complete collection of pixel-perfect UI components designed for modern web applications. All components are:

• Built with React and TypeScript
• Styled with Tailwind CSS
• Production-ready and battle-tested
• Fully customizable and composable
• Accessible by default

Install Components

Install any ZeroZeeker component with a single command:

npx zerozeeker add rainbow-button

No configuration needed. It just works.

Available Components

Current components in the ZeroZeeker library:

• rainbow-button - Animated gradient border with glow effect
• shimmer-button - Moving border animation
• magnetic-button - Cursor-following interaction
• expand-button - Expansion animation
• flip-button - 3D flip transition
• circle-reveal-button - Reveal animation

Browse all components:

npx zerozeeker list

More component types being added regularly.

Commands

Install a Component

npx zerozeeker add <component-name>

Examples:

npx zerozeeker add rainbow-button
npx zerozeeker add shimmer-button
npx zerozeeker add magnetic-button

List All Components

npx zerozeeker list

Get Command Help

npx zerozeeker --help

Requirements

Before using ZeroZeeker components, ensure you have:

• Node.js 18 or higher
• An existing React or Next.js project
• shadcn/ui initialized in your project
• Tailwind CSS configured

Setup shadcn/ui

If you haven't initialized shadcn/ui yet:

npx shadcn-ui@latest init

How to Use Installed Components

After installing a component with the CLI, simply import and use it:

import { RainbowButton } from '@/components/ui/rainbow-button'

export default function App() {
  return (
    <RainbowButton onClick={() => alert('Clicked!')}>
      Click Me
    </RainbowButton>
  )
}

All components follow shadcn/ui conventions. Import from @/components/ui/<component-name>.

Customization

Every component is fully customizable:

import { RainbowButton } from '@/components/ui/rainbow-button'

<RainbowButton 
  size="lg"
  className="w-full"
>
  Custom Button
</RainbowButton>

Components inherit Tailwind CSS styling. Modify the component file in your project to customize.

Troubleshooting

Command not found

Ensure Node.js 18+ is installed:

node --version

"zerozeeker not recognized"

Use the full npx command:

npx zerozeeker list

shadcn/ui not initialized

Initialize shadcn/ui first:

npx shadcn-ui@latest init

Component won't install

Verify the exact component name:

npx zerozeeker list

Then install using the exact name shown.

Maintainer Commands

These commands are for the ZeroZeeker team to manage releases from inside the cli/ directory.

Bump Version

npm run version:patch   # e.g. 2.3.1 → 2.3.2  (bug fixes)
npm run version:minor   # e.g. 2.3.1 → 2.4.0  (new components / features)
npm run version:major   # e.g. 2.3.1 → 3.0.0  (breaking changes)

These update package.json only — no git tag is created.

Publish to npm

npm run release

This automatically runs the build step (prepublishOnly) before publishing with public access.

Typical Release Flow

# 1. Add new components / make changes in index.ts
# 2. Bump the version
npm run version:patch

# 3. Publish
npm run release

The VERSION shown by npx zerozeeker --version is read directly from package.json at runtime — no manual sync needed.

About ZeroZeeker

ZeroZeeker is a modern design system for developers who value:

• Clean, readable code
• Bold, intentional typography
• Generous spacing and breathing room
• Components that just work

Every component is designed to be a solid foundation you can build upon.

Links

• Website: zerozeeker.com
• GitHub: github.com/ZERO-DAWN-X
• NPM: @latest

License

MIT