Alert 28

PreviousNext

Solid warning alert with full amber background for prominent warning messages.

Docs
shadcn-studiocomponent

Preview

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

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

const AlertSolidWarningDemo = () => {
  return (
    <Alert className='border-none bg-amber-600 text-white dark:bg-amber-400'>
      <CircleAlertIcon />
      <AlertTitle>Some details are missing</AlertTitle>
      <AlertDescription className='text-white/80'>Complete your profile to get the best experience.</AlertDescription>
    </Alert>
  )
}

export default AlertSolidWarningDemo

Installation

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

Usage

import { Alert28 } from "@/components/alert-28"
<Alert28 />