Docs
Animated Tabs
Animated Tabs
Displays a beautiful Animated Tabs using framer-motion.
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
Prop | Type | Description |
---|---|---|
className | string | Optional CSS class to apply to the toolbar container |
activeColor | string | Color to use for active items (defaults to "text-primary") |
onSearch | (value: string) => void | Optional 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:
ID | Title | Icon |
---|---|---|
filter | Filter | <Filter /> |
settings | Settings | <Settings /> |
download | Download | <Download /> |
share | Share | <Share2 /> |
notifications | Notifications | <Bell /> |
profile | Profile | <User /> |
theme | Theme | <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.