Magnet Tabs

Animated tab navigation with magnetic hover effect and smooth indicator transitions.

Install using CLI

npx shadcn@latest add "https://obsidianui.dev/r/magnet-tabs.json"

Install Manually

Install dependencies

npm install framer-motion

Copy the source code

Copy the code into components/ui/magnet-tabs.tsx

Usage

1import { MagnetTabs } from "@/components/ui/magnet-tabs"
2import { useState } from "react"
3
4export function Demo() {
5const [activeTab, setActiveTab] = useState("All")
6
7return (
8  <MagnetTabs
9    slug="my-tabs"
10    options={["All", "Latest", "Popular", "Featured"]}
11    activeTab={activeTab}
12    onSelect={setActiveTab}
13  />
14)
15}

Props

Prop Name	Type	Default	Description
slug	`string`	`-`	Unique ID for animations
options	`string[]`	`-`	Array of tab labels
activeTab	`string`	`-`	Currently selected tab
onSelect	`(option: string) => void`	`-`	Callback when selected

3D Displacement Text Mask Cursor Effect