Alert 5

PreviousNext

Attached icon alert with separated icon section and destructive warning styling.

Docs
shadcn-studiocomponent

Preview

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

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

const AlertAttachedIconDemo = () => {
  return (
    <Alert className='flex items-stretch p-0'>
      <div className='bg-destructive/10 text-destructive flex items-center rounded-l-lg border-r p-2'>
        <FileWarningIcon className='size-4' />
      </div>
      <AlertTitle className='p-3'>This file contains virus!</AlertTitle>
    </Alert>
  )
}

export default AlertAttachedIconDemo

Installation

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

Usage

import { Alert05 } from "@/components/alert-05"
<Alert05 />