Todos os componentes

Morphing Text

Morphing Text é um componente de texto para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.

Motion Primitives MIT text

O que é

Morphing Text é um componente de texto 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.

Morphing Text

app/docs/text-morph/text-morph-button.tsx
'use client';
import { useState } from 'react';
import { TextMorph } from '@/components/core/text-morph';

export function TextMorphButton() {
  const [text, setText] = useState('Continue');

  return (
    <button
      onClick={() => setText(text === 'Continue' ? 'Confirm' : 'Continue')}
      className='flex h-10 w-[120px] shrink-0 items-center justify-center rounded-full bg-black px-4 text-base font-medium text-zinc-50 shadow-xs transition-colors hover:bg-zinc-800 dark:bg-zinc-50 dark:text-black dark:hover:bg-zinc-200'
    >
      <TextMorph>{text}</TextMorph>
    </button>
  );
}

Componentes parecidos