Animated Tab

A smooth, animated tab component with glassmorphism design and spring animations.

Installation

Run the following command to install the component:

npx rareui add animated-tab

This will install the component to components/rareui/ directory.

Usage

'use client';

import { useState } from 'react';
import { AnimatedTabs } from '@/components/rareui/AnimatedTab';

const tabs = [
  { id: 'home', label: 'Home' },
  { id: 'about', label: 'About' },
  { id: 'services', label: 'Services' },
  { id: 'contact', label: 'Contact' },
];

export default function MyComponent() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <AnimatedTabs 
      tabs={tabs}
      activeTab={activeTab}
      onChange={setActiveTab}
    />
  );
}

Features

  • Smooth Animations: Spring-based transitions using Framer Motion
  • Glassmorphism Design: Beautiful frosted glass effect with backdrop blur
  • Dark Mode Support: Fully adaptable to light and dark themes
  • Hover Effects: Subtle hover states for better UX
  • Responsive: Works seamlessly across all device sizes

Tab Interface

interface Tab {
  id: string;
  label: string;
}

Props

PropTypeDefaultDescription
tabsTab[]-Array of tab objects with id and label properties.
activeTabstring-The ID of the currently active tab.
onChange(id: string) => void-Callback function triggered when a tab is clicked.
classNamestring-Additional CSS classes for the container.
Previous
Next