Gallery View
Display content in a visual grid layout, perfect for images, cards, or previews.
Kanban View
Organize items into columns for workflows, tasks, or project management.
The Tab Switcher is a compact navigation component designed for smooth, visual tab transitions. Instead of switching content abruptly, the active tab slides into place with a soft background animation, making the interaction feel polished and intentional.
The component runs on the client use client since it relies on state and animated transitions.
State-Driven Tab Control
The active tab is controlled using React state:
const [activeTab, setActiveTab] = useState("gallery");This keeps the logic simple and makes it easy to add more tabs later or sync the state with routing.
Sliding Background Animation
The highlight behind the active tab is a single element that slides horizontally based on the active state:
<div
className={`absolute top-1 bottom-1 w-[calc(50%-0.25rem)]
bg-white rounded-lg shadow-md transition-transform
duration-300 ease-out ${
activeTab === "gallery"
? "translate-x-0"
: "translate-x-full"
}`}
/>Using transform instead of position changes keeps the animation smooth and performant.
Icon Feedback
The icons respond to the active state, reinforcing which tab is selected:
<GradientIconGallery isActive={activeTab === "gallery"} />This subtle feedback helps the component feel more responsive without adding extra animation noise.
Here's the source code, I hope you like it :)
prash240303/crafts/TabSwitcher