Animated Tab
A smooth, animated tab component with glassmorphism design and spring animations.
Installation
pnpm dlx rareui add animated-tab
Usage
1
Import the component
'use client';
import { useState } from 'react';
import { AnimatedTabs } from '@/components/rareui/AnimatedTab';
2
Define tabs and render
const tabs = [
{ id: 'home', label: 'Home' },
{ id: 'about', label: 'About' },
{ id: 'contact', label: 'Contact' },
];
export default function MyComponent() {
const [activeTab, setActiveTab] = useState('home');
return (
<AnimatedTabs
tabs={tabs}
activeTab={activeTab}
onChange={setActiveTab}
/>
);
}
Features
Fluid spring-based transitions using Framer Motion.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | Tab[] | - | Array of tab objects. |
activeTab | string | - | The ID of the currently active tab. |
onChange | (id: string) => void | - | Callback function triggered when a tab is clicked. |
className | string | - | Additional CSS classes for the container. |