Alert 18

PreviousNext

Outline info alert with blue border and text styling for informational messages.

Docs
shadcn-studiocomponent

Preview

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

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

const AlertOutlineInfoDemo = () => {
  return (
    <Alert className='border-sky-600 text-sky-600 dark:border-sky-400 dark:text-sky-400'>
      <CircleAlertIcon />
      <AlertTitle>Verify your email to activate your account</AlertTitle>
      <AlertDescription className='text-sky-600/80 dark:text-sky-400/80'>
        We&apos;ve sent a confirmation link to your inbox. Check your email to complete the sign-up.
      </AlertDescription>
    </Alert>
  )
}

export default AlertOutlineInfoDemo

Installation

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

Usage

import { Alert18 } from "@/components/alert-18"
<Alert18 />