Components > Animated Tabs

page.tsx

import { AnimatedTabs } from "@/components/app-components";

Switch between different sections seamlessly with our animated tab component! 🔄 The active tab transforms with a smooth, playful animation, making navigation a breeze. Say goodbye to static tabs and hello to a dynamic, user-friendly experience! 🌟

Dive into the example below to witness how effortlessly you can incorporate this functionality into your projects:

components/sampleComponent.tsx

  const options: Option[] = [
    {
      label: "Tab 1",
      value: "tab-1",
    },
    {
      label: "Tab 2",
      value: "tab-2",
    },
    {
      label: "Tab 3",
      value: "tab-3",
    },
    {
      label: "Tab 4",
      value: "tab-4",
    },
  ];
  
  const SampleComponent = () => {
    const [selectedOption, setSelectedOption] = useState<Option>({
      label: "Tab 1",
      value: "tab-1",
    });
  
    return (
      <>
        ...
        <AnimatedTabs
          options={options}
          selectedOption={selectedOption}
          setSelectedOption={setSelectedOption}
        />
        ...
      </>
    );
  };
  

All the props of the component is typed by Typescript. So you are safe 🙂