Magnetic Tabs

Overview content goes here.

Installation

Usage

import MagneticTabs from "@/components/ruixen/magnetic-tabs";
 
const tabItems = [
  { value: "overview", label: "Overview", content: "Overview content here." },
  { value: "activity", label: "Activity", content: "Activity content here." },
  { value: "settings", label: "Settings", content: "Settings content here." },
  { value: "faq", label: "FAQ", content: "FAQ content here." },
];
 
export default function App() {
  return (
    <MagneticTabs
      items={tabItems}
      defaultValue="overview"
      indicatorPadding={6}
    />
  );
}

Props

Prop	Type	Default	Description
`items`	`MagneticTabItem[]`	Default items	Array of tab items
`defaultValue`	`string`	`"overview"`	Default active tab value
`className`	`string`	`""`	Additional CSS classes
`indicatorPadding`	`number`	`6`	Padding around tab for magnetic indicator

Features

Magnetic Effect: Indicator follows mouse hover and active state
Smooth Animations: Spring-based transitions for natural feel
Responsive: Automatically adjusts to tab size changes
Blur Effect: Subtle blur effect on the magnetic indicator

Types

interface MagneticTabItem {
  value: string;
  label: string;
  content?: React.ReactNode;
}