Slide Tabs

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Slide Tabs to your project and fits it to your theme.

import { SlideTabsExample } from "@/components/ui/slide-tabs";

export default function DemoOne() {
  return <SlideTabsExample />;
}