React Animated UI

A lightweight React UI library providing animated components and custom hooks for seamless user interactions.

Features

• Prebuilt UI components including buttons, modals, and loaders
• Smooth animations using Framer Motion
• Custom hooks for state management and UI control
• Easy integration into React projects
• Optimized for performance and accessibility

Installation

Install the package using npm:

npm install framer-react-kit

Usage

Import the components and hooks into your React application:

import { Button, Modal, Loader, FadeIn, SlideUp, useToggle } from "react-animated-ui";

Example

This example demonstrates how to use the components:

import React from "react";
import { Button, Modal, Loader, FadeIn, SlideUp, useToggle } from "react-animated-ui";

const App = () => {
  const [isOpen, toggleModal] = useToggle();

  return (
    <>
      <Button onClick={toggleModal}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={toggleModal}>
        <p>This is a modal with smooth animations.</p>
      </Modal>
      <Loader />
      <FadeIn><h1>Welcome to React Animated UI</h1></FadeIn>
      <SlideUp><p>Experience smooth slide-up transitions.</p></SlideUp>
    </>
  );
};

export default App;

License

MIT License © 2025

Contributions

Contributions are welcome. Please submit an issue or pull request on GitHub if you have suggestions or improvements.