Alert 19

PreviousNext

Outline success alert with green border and text for success messages.

Docs
shadcn-studiocomponent

Preview

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

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

const AlertOutlineSuccessDemo = () => {
  return (
    <Alert className='border-green-600 text-green-600 dark:border-green-400 dark:text-green-400'>
      <CheckCheckIcon />
      <AlertTitle>Account created successfully</AlertTitle>
      <AlertDescription className='text-green-600/80 dark:text-green-400/80'>
        You are all set! You can now log in and start exploring your dashboard.
      </AlertDescription>
    </Alert>
  )
}

export default AlertOutlineSuccessDemo

Installation

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

Usage

import { Alert19 } from "@/components/alert-19"
<Alert19 />