StackBits

Buttons

Animated Gradient Button

Copy Button

Hold Button

Toggle Button

Moving Border Button

Navigation Button

Pagination Button

Random Button

Shine Button

Backgrounds

Glowing Dots Background

Prismatic Haze Background

Proximity Background

Space Travel

Wavy Background

Texts

Blur Text

Bounce In Text

Dotted Text

Glitch Text

Gooey Words

Hidden Text

Pixelated Text

Rainbow Text

Sentence Flip

Wavy Text

Utilities

Axios Interceptor

Custom Logger

Dark & Light Theme

Debounce

Encryption Decryption

Express Server

Regex Validations

Yup Validations

Magnet Tabs

MagnetTabs is a stylish tab navigation component for switching between sections in a user interface. It’s ideal for dashboards, settings pages, admin panels, or product views, anywhere content needs to be organized into tabs for better usability.

Install dependencies

npm i framer-motion     

Component

Create a file magnet-tabs.tsx in your components folder and paste this code

'use client';

import React from 'react';
import { motion } from 'framer-motion';

interface MagnetTabsProps {
  slug: string;
  options: string[];
  onSelect: (option: string) => void;
  activeTab: string;
}

const MagnetTabs = ({ slug, options, onSelect, activeTab }: MagnetTabsProps) => {
  const [hovered, setHovered] = React.useState<string | undefined>(undefined);

  return (
    <div className="flex items-start justify-start">
      <ul className="flex border-[1px] border-black/10 border-b-0">
        {options.map((option) => {
          const isActive = activeTab === option;
          return (
            <li
              onMouseEnter={() => setHovered(option)}
              onMouseLeave={() => setHovered(undefined)}
              key={slug + option}
              onClick={() => onSelect(option)}
              className="relative cursor-pointer shrink-0"
            >
              <p
                className={`z-10 relative px-2 py-1 transition-all ${
                  isActive ? 'opacity-100' : 'opacity-50 hover:opacity-100'
                }`}
              >
                {option}
              </p>

              {isActive && (
                <motion.div
                  layout
                  layoutId={slug + 'magnet'}
                  transition={{ duration: 0.2, type: 'spring', bounce: 0.2 }}
                  className="w-full h-1 absolute bottom-full left-0 bg-red-500 rounded-sm"
                />
              )}

              {(hovered === option || (hovered === undefined && isActive)) && (
                <motion.div
                  layout
                  layoutId={slug + 'tab-bar-highlight'}
                  transition={{ duration: 0.2, type: 'spring', bounce: 0 }}
                  className="w-full h-full absolute bottom-0 left-0 bg-white/10 rounded-sm"
                />
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default MagnetTabs;

Usage

import React, { useState } from 'react';
import MagnetTabs from './ui/magnet-tabs';

const MagnetTabsDemo = () => {
  const [activeTab, setActiveTab] = useState('Tab 1');

  return (
    <MagnetTabs
      slug="magnet-tabs"
      options={[
        'Tab 1',
        'Tab 2',
        'Tab 3',
        'Tab 4',
        'Tab 5',
        'Tab 6',
        'Tab 7',
        'Tab 8',
        'Tab 9',
        'Tab 10'
      ]}
      onSelect={(option) => setActiveTab(option)}
      activeTab={activeTab}
    />
  );
};

export default MagnetTabsDemo;