StackBits - React UI & Full-Stack Code Library

Components > Magnet Tabs

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.

Preview

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Tab 8
Tab 9
Tab 10

Follow below steps 👇🏻

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.3, ease: 'backOut' }}
                  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.3, ease: 'backOut' }}
                  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;