Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/uniquesonu/slide-tabsimport { SlideTabsExample } from "@/components/ui/slide-tabs";
export default function DemoOne() {
return <SlideTabsExample />;
}