FluviUI 🌊

FluviUI is a lightweight, high-performance fluid layout engine for React. It allows developers to create fully responsive, professional-grade grids and layouts without writing a single media query.

Built with TypeScript, Tailwind CSS v4.0, and React, it’s designed for simplicity and speed.

---

✨ Features

• 🚀 Zero Media Queries: Truly fluid layouts that adapt to any screen size automatically.
• 📦 Lightweight: Minimal footprint, keeping your bundle size small.
• ⚡ Tailwind Integrated: Fully compatible with Tailwind CSS and daisyUI classes.
• 🛠️ Highly Customizable: Control gaps, minimum widths, and HTML tags with ease.
• 💪 Type Safe: First-class TypeScript support.

---

📦 Installation

Install FluviUI via your favorite package manager:

npm install fluvi-ui

🚀 Quick Start

Wrap your elements with FluviDiv and watch the magic happen. No media queries required!

import { FluviDiv } from 'fluvi-ui';

function App() {
  return (
    <div className="p-10">
      <h1 className="text-3xl font-extrabold mb-8 text-center text-primary">
        Our Pricing Plans
      </h1>
      
      {/* 🌊 The Magic Element */}
      <FluviDiv minWidth="320px" gap="2rem" className="max-w-7xl mx-auto">
        
        {/* Your Components / Cards go here */}
        <div className="card bg-base-200 p-8 rounded-2xl shadow-xl">
          <h2 className="text-2xl font-bold">Starter</h2>
          <p className="text-4xl font-black my-4">$29</p>
          <button className="btn btn-primary w-full">Choose Plan</button>
        </div>

        <div className="card bg-primary text-primary-content p-8 rounded-2xl shadow-xl">
          <h2 className="text-2xl font-bold">Professional</h2>
          <p className="text-4xl font-black my-4">$99</p>
          <button className="btn btn-secondary w-full">Choose Plan</button>
        </div>

        <div className="card bg-base-200 p-8 rounded-2xl shadow-xl">
          <h2 className="text-2xl font-bold">Enterprise</h2>
          <p className="text-4xl font-black my-4">$299</p>
          <button className="btn btn-primary w-full">Choose Plan</button>
        </div>

      </FluviDiv>
    </div>
  );
}

⚙️ API Reference

FluviElement Props

Prop	Type	Default	Description
children	ReactNode	Required	The elements/cards you want to display in the grid.
minWidth	string	"280px"	The minimum width each item should have before wrapping.
gap	string	"1.5rem"	The spacing between grid items (Tailwind units or CSS).
as	string	"div"	The HTML tag to render (section, article, main, etc.).
className	string	""	Additional Tailwind CSS classes for the container.

🎨 Why FluviUI?

Traditional grid systems rely on complex media queries like sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3.

FluviUI simplifies this by using smart CSS auto-fit logic. Your layout will:

1. Automatically calculate how many items fit in a row.
2. Smoothly wrap items when the screen gets too small.
3. Maintain perfect spacing without manual breakpoints.

🛠️ Development & Contribution

We welcome contributions! To get started:

1. Clone the repo: git clone https://github.com/kabir1519/fluvi-ui.git
2. Install deps: npm install
3. Build: npm run build
4. Test: Use npm link to test in a local React project.

📄 License

This project is licensed under the MIT License.

---

Developed with ❤️ for the Developer Community