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.
Category
NavigationReact
CSS
shadcn
Manual
Create a file and paste the following code into it.
src/tabs-demo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;Update the import paths to match your project setup.