Installation
Usage
import { MagneticTabs } from "@/components/ruixen/magnetic-tabs";
export default function App() {
return (
<MagneticTabs
items={[
{
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." },
]}
defaultValue="overview"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | MagneticTabItem[] | Default items | Array of tab items |
defaultValue | string | First item | Default active tab value |
onChange | (value: string) => void | - | Callback when active tab changes |
sound | boolean | true | Enable audio tick on tab selection |
className | string | - | Additional CSS classes |
Features
- Magnetic Attraction: Pill indicator springs to hovered tab position with soft spring
{ stiffness: 300, damping: 25 } - Selection Overshoot: Snappier spring
{ stiffness: 500, damping: 22 }on click with visible overshoot — spring config switches reactively via state - Audio Feedback: Subtle tick sound on tab selection (configurable via
soundprop) - Content Animation:
AnimatePresencewith spring y-offset transitions between tab content - Self-Contained: No external UI dependencies, inline styles with CSS variables
- Light/Dark Theme: CSS variables for both themes with backdrop blur container
Types
interface MagneticTabItem {
value: string;
label: string;
content?: React.ReactNode;
}