zer0ui

A modern React component library with beautiful, customizable components built with TypeScript and Tailwind CSS.

✨ Zero Configuration Required!

Styles automatically included! Just import and use - no CSS imports, no Tailwind config, no setup needed!

Works with:

• ✅ Tailwind CSS v3
• ✅ Tailwind CSS v4
• ✅ Any other CSS framework
• ✅ No framework at all!

Installation

npm install zer0ui

🎉 Components auto-install! After installation, all component source files are automatically copied to src/components/zer0/ so you can customize them immediately.

Usage

Option 1: Import from Local Components (Recommended)

After installation, components are available in your project:

import { PrimaryButton } from "@/components/zer0/Buttons";
import { GradientText } from "@/components/zer0/Text";

function App() {
  return (
    <div>
      <GradientText variant="blue">Welcome to zer0ui</GradientText>
      <PrimaryButton onClick={() => alert("Clicked!")}>Click Me</PrimaryButton>
    </div>
  );
}

Benefits:

• ✅ Full source code access
• ✅ Edit components directly
• ✅ See exactly how they work
• ✅ Customize anything

Option 2: Direct Import (No Customization)

Import pre-built components directly from the package:

import { PrimaryButton, GradientText } from "zer0ui";

function App() {
  return (
    <div>
      <GradientText variant="blue">Welcome to zer0ui</GradientText>
      <PrimaryButton onClick={() => alert("Clicked!")}>Click Me</PrimaryButton>
    </div>
  );
}

Benefits:

• ✅ Zero configuration
• ✅ Styles auto-injected
• ✅ Works immediately
• ❌ Can't edit component code

Requirements

For Option 1 (Local Components):

• ✅ React 18+ or 19+
• ✅ Tailwind CSS configured in your project
• ✅ react-icons (required for IconButton, Navbar, Sidebar, BottomDock)

npm install -D tailwindcss postcss autoprefixer
npm install react-icons

Update your tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  // ... rest of config
};

Note: If you don't use IconButton or Navigation components, you can skip installing react-icons.

For Option 2 (Direct Import):

• ✅ React 18+ or 19+
• ✅ react-icons (optional - only if using IconButton, Navbar, Sidebar, or BottomDock)
• ✅ Zero configuration needed for other components

Components

Buttons

Modern, interactive button components:

• PrimaryButton - Primary action button with dark background
• SecondaryButton - Secondary button with outline style
• GhostButton - Minimal button for subtle actions
• OutlineButton - Bold outlined button
• IconButton - Button designed for icons (requires react-icons)
• PulsingButton - Animated pulsing button for attention
• PopperButton - Button with popover content

import { PrimaryButton, SecondaryButton } from "zer0ui";

<PrimaryButton onClick={() => console.log("clicked")}>Click Me</PrimaryButton>;

Text Components

Beautiful text effects and animations:

• GradientText - Text with gradient colors
• GlitchText - Glitch effect text
• NeonText - Neon glow effect
• TypewriterText - Typewriter animation
• AnimatedUnderlineText - Hover underline effect
• OutlineText - Outlined text
• RotatingText - Rotating word animation
• WavyText - Wavy animation effect
• ShadowText - Text with drop shadow
• RetroText - Retro layered effect
• BlurEffect - Scanline blur effect
• SprayBlurText - Halftone grunge effect

import { GradientText, TypewriterText } from 'zer0ui';

<GradientText variant="purple">Beautiful Gradient</GradientText>
<TypewriterText text="Hello, World!" speed={100} />

Cards

Pre-built card components for common use cases:

• PricingCards - Pricing plan cards
• StatsCards - Statistics display cards
• TestimonialCards - Customer testimonial cards
• OverlappingCards - Overlapping card layout
• DynamicStoryCard - Story card with images
• DynamicStoryCardNoImages - Story card without images

import { PricingCards, StatsCards } from 'zer0ui';

<PricingCards />
<StatsCards />

Navigation

Navigation components for your application:

• Navbar - Top navigation bar
• Sidebar - Side navigation panel
• BottomDock - Bottom dock navigation

import { Navbar, Sidebar } from 'zer0ui';

<Navbar />
<Sidebar />

Optional: Icon Components

If you want to use IconButton or navigation components with icons:

npm install react-icons

Then use it:

import { IconButton } from "zer0ui";
import { FaHeart } from "react-icons/fa";

<IconButton icon={FaHeart} ariaLabel="Like" />;

TypeScript

This library is written in TypeScript and includes type definitions. You'll get full type safety and autocomplete in your IDE.

Customization

All components accept a className prop for customization:

<PrimaryButton className="w-full text-lg">Custom Button</PrimaryButton>

License

MIT

Author

TheZer0Company

Repository

https://github.com/neelshha/components-thezer0company

Support

For issues, questions, or contributions, please visit our GitHub repository.