Alert with Dismiss
Alert with Dismiss é um componente de feedback para React e Tailwind CSS, da biblioteca Bund UI, com licença MIT. Copia e cola no teu projeto.
Bund UI
MIT
feedback
O que é
Alert with Dismiss é um componente de feedback para React e Tailwind CSS, da biblioteca Bund 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.
Cinco cópias grátis por mês. Sem cartão.
Precisa de
npm i lucide-react
Licença
Este componente vem de Bund UI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.
Alert with Dismiss
"use client";
import { useState } from "react";
import { CheckCircle2Icon, XIcon } from "lucide-react";
import { Alert, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
export default function AlertWithDismiss() {
const [show, setShow] = useState(true);
if (!show) return null;
return (
<Alert className="flex items-center justify-between">
<div className="flex gap-3">
<CheckCircle2Icon className="mt-0.5 size-4" />
<AlertTitle>Success! Your changes have been saved</AlertTitle>
</div>
<Button variant="ghost" size="icon-sm" onClick={() => setShow(false)}>
<XIcon />
</Button>
</Alert>
);
}