Components > Animated Tabs

page.vue

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

Effortlessly switch between different sections with our Nuxt Starter AI animated tab component! 🔄 The active tab changes with a smooth, playful animation, making navigation easy and fun. Say goodbye to boring static tabs and welcome a dynamic, user-friendly experience! 🌟

Check out the example below to see how easily you can add this functionality to your projects:

components/SampleComponent.vue

  <template>
  <AppAnimatedTabs v-model="selectedOption" :options="options" />
  </template>

  <script>
  const options: Option[] = [
    {
      label: "Payments",
      value: "payments",
    },
    {
      label: "Authentication",
      value: "authentication",
    },
    {
      label: "SEO",
      value: "seo",
    },
    {
      label: "AI",
      value: "ai",
    },
  ];
  const selectedOption = ref(options[0]);

  </script>

  <style>
  </style>
  

Nuxt Starter AI AnimatedTabs component is fully typed by Typescript. So you are safe 🙂