SlideTabs ā Animated Hover Tab Indicator with Framer Motion SlideTabs is a sleek, interactive tab navigation component built with React and Framer Motion. It features a smooth, animated underline (cursor) that follows the user's hover action, giving your UI a modern and dynamic touch.
āØ Features: Framer Motion-powered hover animation that dynamically adjusts the position and width of the indicator.
Custom cursor highlight that appears only when hovering over a tab.
Responsive design with minimal styling ā easy to customize and extend.
Built with accessibility and interactivity in mind using native ul/li elements.
š” Use Case: Perfect for navigation menus, feature tabs, or landing pages where you want to elevate the UX with subtle motion.
š¦ Tech Stack: React (Functional Components + Hooks)
Framer Motion for animation
Tailwind CSS for styling
š§ How it Works: Each Tab uses a ref to measure its size and position on hover.
The Cursor (animated highlight) moves and resizes smoothly based on the hovered tab.
On mouse leave, the cursor fades out for a clean effect.
import { SlideTabsExample } from "@/components/ui/slide-tabs";
export default function DemoOne() {
return <SlideTabsExample />;
}