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.

Precisa de

npm i lucide-react

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.tsx

import { Home, PhoneCall, Settings, User } from 'lucide-react';
import { AnimatedBackground } from '@/components/core/animated-background';

export function AnimatedTabs() {
  const TABS = [
    {
      label: 'Home',
      icon: <Home className='h-5 w-5' />,
    },
    {
      label: 'About',
      icon: <User className='h-5 w-5' />,
    },
    {
      label: 'Services',
      icon: <Settings className='h-5 w-5' />,
    },
    {
      label: 'Contact',
      icon: <PhoneCall className='h-5 w-5' />,
    },
  ];

  return (
    <div className='absolute bottom-8'>
      <div className='flex w-full space-x-2 rounded-xl border border-zinc-950/10 bg-white p-2'>
        <AnimatedBackground
          defaultValue={TABS[0].label}
          className='rounded-lg bg-zinc-100'
          transition={{
            type: 'spring',
            bounce: 0.2,
            duration: 0.3,
          }}
        >
          {TABS.map((tab) => (
            <button
              key={tab.label}
              data-id={tab.label}
              type='button'
              className='inline-flex h-9 w-9 items-center justify-center text-zinc-500 transition-colors duration-100 focus-visible:outline-2 data-[checked=true]:text-zinc-950'
            >
              {tab.icon}
            </button>
          ))}
        </AnimatedBackground>
      </div>
    </div>
  );
}

Componentes parecidos