Todos os componentes

Glare Hover Call To Action

Glare Hover Call To Action é um componente de botão para React e Tailwind CSS, da biblioteca Magic UI, com licença MIT. Copia e cola no teu projeto.

Magic UI MIT buttons

O que é

Glare Hover Call To Action é um componente de botão para React e Tailwind CSS, da biblioteca Magic UI, 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 Magic UI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Glare Hover Call To Action

registry/example/glare-hover-demo-cta.tsx

import { Button } from "@/components/ui/button"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { GlareHover } from "@/registry/magicui/glare-hover"

export default function Cta() {
  return (
    <GlareHover className="rounded-xl" color="#505050" duration={700}>
      <Card className="w-full text-center">
        <CardHeader>
          <p className="text-muted-foreground text-xs font-medium tracking-widest uppercase">
            14-day free trial · No card required
          </p>
          <CardTitle className="text-2xl tracking-tight">
            Ready to get started?
          </CardTitle>
          <CardDescription className="mx-auto max-w-sm">
            Join 4,000+ teams already using our platform to ship faster.
          </CardDescription>
        </CardHeader>
        <CardFooter className="justify-center gap-2">
          <Button>Start free trial</Button>
          <Button variant="outline">View demo</Button>
        </CardFooter>
      </Card>
    </GlareHover>
  )
}

Componentes parecidos