Fade Slide Tabs

Overview

This is the overview section of your app.

Installation

Usage

import FadeSlideTabs from "@/components/ruixen/fade-slide-tabs";
 
const tabItems = [
  {
    value: "overview",
    label: "Overview",
    content: "Overview content goes here.",
  },
  {
    value: "activity",
    label: "Activity",
    content: "Activity content goes here.",
  },
  {
    value: "settings",
    label: "Settings",
    content: "Settings content goes here.",
  },
  { value: "faq", label: "FAQ", content: "Frequently asked questions." },
];
 
export default function App() {
  return <FadeSlideTabs items={tabItems} defaultValue="overview" />;
}

Props

Prop	Type	Default	Description
`items`	`FadeSlideTabItem[]`	Default items	Array of tab items
`defaultValue`	`string`	`"overview"`	Default active tab value
`className`	`string`	`""`	Additional CSS classes

Features

Fade Animation: Content fades in/out smoothly
Slide Effect: Content slides horizontally during transitions
Wait Mode: Uses AnimatePresence wait mode for clean transitions
Backdrop Blur: Glassmorphism effect on tab list

Types

interface FadeSlideTabItem {
  value: string;
  label: string;
  content?: React.ReactNode;
}