Mastering the Art of FAB: Building Stunning Floating Action Buttons with Tailwind CSS, React, and Framer Motion

In this tutorial, we’ll delve into the world of FAB buttons, those eye-catching elements that enhance both the aesthetics and functionality of modern user interfaces. By utilizing the power of Tailwind CSS, React, and Framer Motion, we’ll create an interactive and stylish Floating Action Button (FAB). Whether you’re an experienced developer or a beginner in web development, this tutorial will provide you with the necessary steps and code samples to master the art of crafting a captivating FAB button. Get ready to elevate your user interfaces with the perfect blend of design and interactivity. Let’s begin!

Setting Up the Project:

1. Creating a New React Project:

• Open your preferred command-line interface (CLI).
• Run the command to create a new React project using create-react-app:

npx create-react-app fab-button-project

This will create a new directory named “fab-button-project” with a basic React project structure.

2.Installing and Configuring Tailwind CSS:

Navigate into the project directory:

cd fab-button-project

Install Tailwind CSS and its dependencies using npm or Yarn:

npm install tailwindcss postcss autoprefixer

yarn add tailwindcss postcss autoprefixer

Generate the default configuration files for Tailwind CSS:

npx tailwindcss init -p

• This will create a tailwind.config.js file and a postcss.config.js file in the project's root directory.
• Open the tailwind.config.js file and customize the configuration based on your styling preferences.

Integrating Tailwind CSS with React:

In the project’s src directory, create a new file called index.css and import Tailwind CSS:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

In the src/index.js file, import the index.css file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Tailwind CSS is now ready to be used in your React components.

3. Installing Framer Motion:

In the project directory, install Framer Motion using npm or Yarn:

npm install framer-motion

yarn add framer-motion

Framer Motion is now successfully installed and ready to be utilized for animations in our FAB button component.

By following these steps, you’ve set up a new React project, integrated Tailwind CSS for rapid styling, and installed Framer Motion for animations. In the next section, we’ll dive into creating the FAB button component.

2. Creating the FAB Button Component

To create the FAB (Floating Action Button) component, follow these steps:

1. Import the necessary dependencies:

import { AnimatePresence, motion } from "framer-motion";
import { useCallback, useState } from "react"

2. Define the animation variants for the container and each list item:

const container = {
  hidden: {
    translateY: 50,
    opacity: 0,
  },
  show: {
    translateY: 0,
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.3,
    },
  },
};

const itemA = {
  hidden: { translateY: 25, opacity: 0 },
  show: { translateY: 0, opacity: 1 },
};

const itemB = {
  hidden: { translateY: 25, opacity: 0 },
  show: { translateY: 0, opacity: 1 },
};

const itemC = {
  hidden: { translateY: 25, opacity: 0 },
  show: { translateY: 0, opacity: 1 },
};

3. Create the FabButton component using functional component syntax:

const FabButton = () => {
  const [isFabEnabled, setIsFabEnabled] = useState(false);

  const toggleFAB = useCallback(() => {
    setIsFabEnabled((prevState) => !prevState);
  }, []);

  return (
    // FAB button container
    <div className="bg-primary h-16 w-16 rounded-full p-0.5 rounded-br-md fixed bottom-5 right-5 flex items-center justify-center shadow-primary shadow-sm hover:shadow-md hover:shadow-primary cursor-pointer active:scale-95 transition-all ease-in">
      <div
        onClick={toggleFAB}
        className={`select-none secondaryBorderThick rounded-full w-full h-full flex items-center justify-center transition-transform ease-in ${
          isFabEnabled ? "rotate-[315deg]" : ""
        }`}
      >
        {/* FAB button icon */}
        <svg
          className="floater__btn-icon floater__btn-icon-plus"
          width="18px"
          height="18px"
          viewBox="672 53 24 24"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlnsXlink="http://www.w3.org/1999/xlink"
        >
          {/* SVG path */}
        </svg>
      </div>

      {/* FAB button list */}
      <AnimatePresence>
        {isFabEnabled && (
          <motion.ul
            variants={container}
            initial="hidden"
            animate="show"
            exit="hidden"
            className="absolute bottom-20 flex justify-between flex-col items-center gap-2"
          >
            {/* List item A */}
            <motion.li
              variants={itemA}
              className="h-14 w-14 rounded-full bg-cyan-500"
            ></motion.li>

            {/* List item B */}
            <motion.li
              variants={itemB}
              className="h-14 w-14 rounded-full bg-[#F4458D]"
            ></motion.li>

            {/* List item C */}
            <motion.li
              variants={itemC}
              className="h-14 w-14 rounded-full bg-[#0094E8]"
            ></motion.li>
          </motion.ul>
        )}
      </AnimatePresence>
    </div>
  );
};

export default FabButton;

Explanation of Tailwind CSS classes:

• bg-primary: Sets the background color of the FAB button container to a primary color.
• h-16: Sets the height of the FAB button container to 16 pixels.
• w-16: Sets the width of the FAB button container to 16 pixels.
• rounded-full: Makes the FAB button container fully rounded, creating a circular shape.
• p-0.5: Adds padding of 0.5 units to the FAB button container.
• rounded-br-md: Adds rounded corners to the bottom-right corner of the FAB button container.
• fixed: Positions the FAB button container as a fixed element on the screen.
• bottom-5: Positions the FAB button container 5 units from the bottom of the screen.
• right-5: Positions the FAB button container 5 units from the right side of the screen.
• flex: Makes the FAB button container a flex container.
• items-center: Centers the content vertically within the FAB button container.
• justify-center: Centers the content horizontally within the FAB button container.
• shadow-primary: Applies a primary-colored shadow to the FAB button container.
• shadow-sm: Applies a small-sized

Using our newly created FabButton in our project

To use the FabButton component in your React project, follow these steps:

1. Make sure you have the FabButton component file (FabButton.js) available in your project directory.

2. In the file where you want to use the FabButton, import it at the top:

import FabButton from './FabButton';

3. In the same file, within the JSX code, add the FabButton component wherever you want it to be rendered:

function App() {
  return (
    <div className="bg-white w-screen h-screen">
      {/* Other components and content */}
      <FabButton />
    </div>
  );
}

export default App;

4. Save the file, and the FabButton component will be rendered in your React project.

Now, when you run your React project, the FabButton component will be available and functional, allowing you to toggle the FAB button and display the list items when enabled.

Conclusion

In this tutorial, we explored the process of creating a visually appealing and interactive Floating Action Button (FAB) using Tailwind CSS, React, and Framer Motion. Let’s recap the key points covered:

- We started by setting up a new React project and configuring Tailwind CSS to leverage its utility classes and rapid styling capabilities.
- Then, we imported the necessary dependencies, including Framer Motion, a powerful animation library for React.
- Next, we created the `FabButton` component and structured it using JSX. We applied Tailwind CSS classes to style the FAB button according to our design preferences.
- We implemented basic interactivity by adding hovering and clicking effects using Framer Motion animations.
- Finally, we demonstrated how to use the `FabButton` component in a React project.

By combining the strengths of Tailwind CSS, React, and Framer Motion, we were able to create a stylish and interactive FAB button. However, this is just the beginning. I encourage you to explore further and customize the FAB button to suit your project’s requirements. Additionally, you can dive deeper into the capabilities of Tailwind CSS, React, and Framer Motion to discover more exciting features and possibilities for your web applications.

Learning to create reusable components like the FAB button is a valuable skill that empowers you to build modern and engaging user interfaces. By mastering these libraries and frameworks, you’ll have the ability to create dynamic and visually appealing web applications that provide a great user experience.

So, go ahead and experiment, unleash your creativity, and enjoy the process of building remarkable web interfaces with Tailwind CSS, React, and Framer Motion!