Todos os componentes

Animated Tab Background

Animated Tab Background é um componente de navegação para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.

Motion Primitives MIT navigation

O que é

Animated Tab Background é um componente de navegação para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de Motion Primitives e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Animated Tab Background

app/docs/animated-background/animated-tabs-hover.tsx
import { AnimatedBackground } from '@/components/core/animated-background';

export function AnimatedTabsHover() {
  const TABS = ['Home', 'About', 'Services', 'Contact'];

  return (
    <div className='flex flex-row'>
      <AnimatedBackground
        defaultValue={TABS[0]}
        className='rounded-lg bg-zinc-100 dark:bg-zinc-800'
        transition={{
          type: 'spring',
          bounce: 0.2,
          duration: 0.3,
        }}
        enableHover
      >
        {TABS.map((tab, index) => (
          <button
            key={index}
            data-id={tab}
            type='button'
            className='px-2 py-0.5 text-zinc-600 transition-colors duration-300 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-zinc-50'
          >
            {tab}
          </button>
        ))}
      </AnimatedBackground>
    </div>
  );
}

Componentes parecidos