Components
Loading preview...
Alert in shadcn/ui format
npx shadcn@latest add https://21st.dev/r/serafimcloud/alertimport { Alert } from "@/components/ui/alert"
import { TriangleAlert, ArrowRight } from "lucide-react"
function AlertWithLink() {
return (
<Alert
layout="row"
icon={
<TriangleAlert className="text-amber-500" size={16} strokeWidth={2} />
}
>
<div className="flex grow justify-between gap-3">
<p className="text-sm">Some information is missing!</p>
<a href="#" className="group whitespace-nowrap text-sm font-medium">
Link
<ArrowRight
className="-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5"
size={16}
strokeWidth={2}
/>
</a>
</div>
</Alert>
)
}
export { AlertWithLink }