Alert 25

PreviousNext

Soft destructive alert with red background and subtle styling for errors.

Docs
shadcn-studiocomponent

Preview

Loading preview…
registry/new-york/components/alert/alert-25.tsx
import { TriangleAlertIcon } from 'lucide-react'

import { Alert, AlertTitle, AlertDescription } from '@/registry/new-york/ui/alert'

const AlertSoftDestructiveDemo = () => {
  return (
    <Alert className='bg-destructive/10 text-destructive border-none'>
      <TriangleAlertIcon />
      <AlertTitle>Upload failed</AlertTitle>
      <AlertDescription className='text-destructive/80'>
        Something went wrong. Please try again or use a different file format.
      </AlertDescription>
    </Alert>
  )
}

export default AlertSoftDestructiveDemo

Installation

npx shadcn@latest add @shadcn-studio/alert-25

Usage

import { Alert25 } from "@/components/alert-25"
<Alert25 />