Alert 24

PreviousNext

Soft warning alert with amber background and subtle styling for warnings.

Docs
shadcn-studiocomponent

Preview

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

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

const AlertSoftWarningDemo = () => {
  return (
    <Alert className='border-none bg-amber-600/10 text-amber-600 dark:bg-amber-400/10 dark:text-amber-400'>
      <CircleAlertIcon />
      <AlertTitle>This file might be too large</AlertTitle>
      <AlertDescription className='text-amber-600/80 dark:text-amber-400/80'>
        Uploading large files may take longer or fail. Consider compressing it first.
      </AlertDescription>
    </Alert>
  )
}

export default AlertSoftWarningDemo

Installation

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

Usage

import { Alert24 } from "@/components/alert-24"
<Alert24 />