Animated Tab Background
Animated Tab Background é um componente para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.
Motion Primitives
MIT
other
O que é
Animated Tab Background é um componente 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.
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
import { AnimatedBackground } from '@/components/core/animated-background';
export function SegmentedControl() {
return (
<div className='rounded-[8px] bg-gray-100 p-[2px] dark:bg-zinc-800'>
<AnimatedBackground
defaultValue='Day'
className='rounded-lg bg-white dark:bg-zinc-700'
transition={{
ease: 'easeInOut',
duration: 0.2,
}}
>
{['Day', 'Week', 'Month', 'Year'].map((label, index) => {
return (
<button
key={index}
data-id={label}
type='button'
aria-label={`${label} view`}
className='inline-flex w-20 items-center justify-center text-center text-zinc-800 transition-transform active:scale-[0.98] dark:text-zinc-50'
>
{label}
</button>
);
})}
</AnimatedBackground>
</div>
);
}