Zoom Depth Tabs

Dashboard Overview

Here you can see a summary of your analytics, quick stats, and recent activity.

Installation

Usage

import ZoomDepthTabs from "@/components/ruixen/zoom-depth-tabs";
 
const tabItems = [
  {
    value: "overview",
    label: "Overview",
    content: "Overview with rich info and stats.",
  },
  {
    value: "activity",
    label: "Activity",
    content: "Activity with graphs and timelines.",
  },
  {
    value: "settings",
    label: "Settings",
    content: "Settings with controls and toggles.",
  },
  {
    value: "faq",
    label: "FAQ",
    content: "Common questions and helpful answers.",
  },
];
 
export default function App() {
  return <ZoomDepthTabs items={tabItems} defaultValue="overview" />;
}

Props

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

Features

3D Effects: Tabs have rotateX and rotateY transformations
Zoom Animation: Active tabs scale up with spring animations
Depth Perception: Uses perspective and transforms for 3D feel
Smooth Transitions: Spring-based animations for natural movement

Types

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