Todos os componentes

Glare Hover Alert

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

Magic UI MIT overlays

O que é

Glare Hover Alert é um componente de sobreposiçã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 Alert

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

import { CheckCircleIcon, InfoIcon, TriangleAlertIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { GlareHover } from "@/registry/magicui/glare-hover"

export default function Alerts() {
  return (
    <div className="flex flex-col gap-3">
      <GlareHover className="rounded-lg" duration={550} opacity={0.25}>
        <Alert className="[&>svg~*]:pl-10">
          <InfoIcon />
          <AlertTitle>Action required</AlertTitle>
          <AlertDescription>
            Your plan expires in 3 days. Renew to keep access.
          </AlertDescription>
        </Alert>
      </GlareHover>

      <GlareHover
        className="w-full rounded-lg"
        color="#ff6070"
        opacity={0.25}
        duration={550}
      >
        <Alert variant="destructive" className="bg-background [&>svg~*]:pl-10">
          <TriangleAlertIcon />
          <AlertTitle>Payment declined</AlertTitle>
          <AlertDescription>
            Check your card details and try again.
          </AlertDescription>
        </Alert>
      </GlareHover>

      <GlareHover
        className="w-full rounded-lg"
        color="#60ff70"
        opacity={0.25}
        duration={550}
      >
        <Alert className="[&>svg~*]:pl-10">
          <CheckCircleIcon className="stroke-emerald-500" />
          <AlertTitle className="text-emerald-500">
            Subscription confirmed
          </AlertTitle>
          <AlertDescription className="text-emerald-500">
            You have full Pro access until April 5, 2027.
          </AlertDescription>
        </Alert>
      </GlareHover>
    </div>
  )
}

Componentes parecidos