The Zoom + Depth Tabs component gives a modern, interactive feel to tab navigation by introducing subtle 3D-inspired animations. When a tab becomes active, it slightly zooms in and brightens, while inactive tabs tilt back and fade, creating the illusion of depth on the interface. This effect makes switching between sections feel more dynamic and engaging compared to standard flat tab bars. It works especially well for creative dashboards, analytics pages, or modern applications where user experience and aesthetics are equally important. By supporting props for labels, content, and default values, the component is flexible enough to adapt to different use cases while maintaining a sleek, professional style.
import ZoomDepthTabs from "@/components/ui/zoom-depth-tabs";
export default function DemoOne() {
return (
<ZoomDepthTabs
defaultValue="overview"
items={[
{
value: "overview",
label: "Overview",
content: (
<div>
<h2 className="text-lg font-medium mb-2">Dashboard Overview</h2>
<p className="text-muted-foreground">
Here you can see a summary of your analytics, quick stats, and recent activity.
</p>
</div>
),
},
{
value: "reports",
label: "Reports",
content: (
<div>
<h2 className="text-lg font-medium mb-2">Reports Section</h2>
<p className="text-muted-foreground">
Generate detailed reports and export them as PDF, CSV, or Excel.
</p>
</div>
),
},
{
value: "settings",
label: "Settings",
content: (
<div>
<h2 className="text-lg font-medium mb-2">User Settings</h2>
<p className="text-muted-foreground">
Manage account preferences, notification settings, and integrations.
</p>
</div>
),
},
{
value: "help",
label: "Help",
content: (
<div>
<h2 className="text-lg font-medium mb-2">Help & Support</h2>
<p className="text-muted-foreground">
Find FAQs, tutorials, or reach out to our support team.
</p>
</div>
),
},
]}
/>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.