Docs
Animated Tabs

Animated Tabs

Displays a beautiful Animated Tabs using framer-motion.

Loading...

Installation

Install the following dependencies:

npm install framer-motion lucide-react

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Event Calendar code into your project.

API Reference

A responsive and interactive AnimatedTabs component with animated buttons, toggle functionality.

Props

PropTypeDescription
classNamestringOptional CSS class to apply to the toolbar container
activeColorstringColor to use for active items (defaults to "text-primary")
onSearch(value: string) => voidOptional callback function for search functionality

Features

  • Animated button expansion on selection
  • Toggle button with different states
  • Smooth transitions and animations
  • Responsive design

Usage Example

 
export default function MyPage() {
  const handleSearch = (value: string) => {
    console.log("Searching for:", value);
  };
  return (
    <div className="p-4">
      <AnimatedTabs 
        className="my-4" 
        activeColor="text-blue-500" 
        onSearch={handleSearch} 
      />
    </div>
  );
}

Default Items

The tabsItem comes with the following default items:

IDTitleIcon
filterFilter<Filter />
settingsSettings<Settings />
downloadDownload<Download />
shareShare<Share2 />
notificationsNotifications<Bell />
profileProfile<User />
themeTheme<Sun />

Customization

The component uses Tailwind CSS for styling and can be customized through the className prop. The active item color can be modified using the activeColor prop.

Countdown T...3D Logo par...