MicroX UI

A simple and customizable UI component library for React applications with various animation effects.

Installation

# Install the library
npm install microx-ui

# Make sure you have the peer dependencies
npm install react react-dom

Or using Yarn:

# Install the library
yarn add microx-ui

# Make sure you have the peer dependencies
yarn add react react-dom

Usage

Animation Demo

The easiest way to get started is to use the AnimationDemo component which showcases all available animations:

import { AnimationDemo } from 'microx-ui';

function App() {
  return (
    <div className="App">
      <AnimationDemo />
    </div>
  );
}

Individual Components

Animation Buttons

import { AnimationButton } from 'microx-ui';

function App() {
  return (
    <div>
      <AnimationButton animation="fade">Fade Animation</AnimationButton>
      <AnimationButton animation="pop">Pop Animation</AnimationButton>
      <AnimationButton animation="slide">Slide Animation</AnimationButton>
      <AnimationButton animation="shine">Shine Animation</AnimationButton>
    </div>
  );
}

Underline Button

import { UnderlineButton } from 'microx-ui';

function App() {
  return (
    <div>
      <UnderlineButton>Hover to see underline effect</UnderlineButton>
    </div>
  );
}

Text Animation

import { TextAnimationSplit } from 'microx-ui';

function App() {
  return (
    <div>
      <TextAnimationSplit text="Shiny Text Animation" />
      <TextAnimationSplit text="Faster Animation" speed={3} />
      <TextAnimationSplit text="Slower Animation" speed={8} />
      <TextAnimationSplit text="Disabled Animation" disabled={true} />
    </div>
  );
}

Available Components

• AnimationButton: Button with various animation effects (fade, pop, slide, shine)
• UnderlineButton: Button with an underline animation on hover
• TextAnimationSplit: Text with a shiny animation effect
• AnimationDemo: Demo component showcasing all animations

Examples

Check out the example directory for a complete React application example that demonstrates how to use all the components provided by the MicroX UI library.

You can also open the test.html file in your browser to see a simple HTML/CSS/JavaScript implementation of the animations.

Building the Library

To build the library for production:

npm run build
# or
yarn build

License

This project is licensed under the MIT License - see the LICENSE file for details.