aspect-popover v0.1.8

Aspect Popover

A lightweight and customizable popover component for React, built with Tailwind CSS and Framer Motion.

🚀 Features

• 🛠️ Highly Customizable – Easily modify styles and animations.
• ⚡ Lightweight & Performant – Optimized for fast rendering.
• 🎨 TailwindCSS Support – Seamlessly integrates with Tailwind.
• 🏗️ Framer Motion Animations – Smooth, modern transitions.
• 🔌 Works with React 18 & 19 – Supports the latest React versions.

📦 Installation

npm install aspect-popover
# or
yarn add aspect-popover
# or
pnpm add aspect-popover

✨ Usage

import React from "react";
import { Popover } from "aspect-popover";

export default function Example() {
  return (
    <Popover trigger={<button>Open Popover</button>}>
      <div className="p-4 bg-white shadow-lg rounded-lg">Hello, World!</div>
    </Popover>
  );
}

🎨 Customization

Props

Example with Custom Placement

<Popover trigger={<button>Hover me</button>} placement="top">
  <div className="p-4 bg-gray-100 border rounded">I'm on top!</div>
</Popover>

⚙️ Configuration

Aspect Popover supports Tailwind CSS by default. If you're using Tailwind, ensure your tailwind.config.js includes:

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

🤝 Contributing

We welcome contributions! To contribute:

1. Fork the repository.
2. Clone your fork and install dependencies:

   git clone https://github.com/yourusername/aspect-popover.git
   cd aspect-popover
   npm install

3. Make Changes – Update the component or docs.
4. Commit & Push – Follow conventional commit messages.
5. Open a Pull Request – Submit your PR for review.

📜 License

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

⭐ Support

If you like this project, consider giving it a ⭐ on GitHub!

Happy coding! 🚀