How to add background transition for tabs when I switch from tab to another tab?

[alamenai]

Hi,

I have two tabs:

1. Standard
2. Individuell

5df1c354-908f-411a-bb5a-385422311996.webm

Code:

 <Tabs defaultValue='default'>
      <TabsList className='flex relative border-b w-full items-start justify-center bg-transparent pl-8 py-2 h-fit'>
        <TabsTrigger
          value='default'
          onClick={updateQueryParam("default")}
          className='transition 0.5s ease-in-out, color 0.5s ease-in-out w-[180px] rounded-full h-11 data-[state=active]:bg-gradient-to-r from-blue-900  to-red-500 data-[state=active]:text-white'
        >
          Standard
        </TabsTrigger>
        <TabsTrigger
          value='custom'
          onClick={updateQueryParam("custom")}
          className='w-[180px] rounded-full h-11 data-[state=active]:bg-gradient-to-r from-blue-900  to-red-500 data-[state=active]:text-white'
        >
          Individuell
        </TabsTrigger>
      </TabsList>
      <TabsContent value='default'>
        <div className='overflow-y-auto mb-16  h-[calc(100vh - 400px)]'>
          <DefaultInstallation image={image} />
        </div>
      </TabsContent>
      <TabsContent value='custom'>
        <div className='overflow-y-auto mb-16'>
          <CustomInstallation roofs={roofs} image={image} />
        </div>
      </TabsContent>
    </Tabs>

I want to add smooth animation ( background transition ) when the user switches from tab to another tab using tailwindCSS.

[Kalyankr]

I am trying to do the same, I found shadcn-solid page where it does but not with native shadcn

[ao-Barbosa]

shadcn-solic Tabs component is based on kobalte, which has a "TabsIndicator" component that can be animated to indicate which tab has focus.

Shadcn (react) is based on radix and doesn't have the same component tree with the indicator. This seems like it would be quite hard to implement while still using radix.