Morphing Navigation Tabs (Compact & Expanded)

A soft morphing tab component where icons expand into labeled states with smooth background transitions. Designed for modern dashboards and system interfaces.

NavigationReactFramer Motion

CSSshadcn

Manual

Create a file and paste the following code into it.

src/tabs-demo.tsx

import {
  DefaultDemo,
  CustomColorDemo,
} from "@/components/ui/expandable-tabs-demos";

function SliderDemo() {
  return (
    <div className="flex h-dvh w-full flex-col items-center justify-center space-y-10">
      <DefaultDemo />
      <CustomColorDemo />
    </div>
  );
}

export default SliderDemo;