Alert 27

PreviousNext

Solid success alert with full green background for prominent success messages.

Docs
shadcn-studiocomponent

Preview

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

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

const AlertSolidSuccessDemo = () => {
  return (
    <Alert className='border-none bg-green-600 text-white dark:bg-green-400'>
      <CheckCheckIcon />
      <AlertTitle>Profile updated</AlertTitle>
      <AlertDescription className='text-white/80'>Your changes have been saved successfully.</AlertDescription>
    </Alert>
  )
}

export default AlertSolidSuccessDemo

Installation

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

Usage

import { Alert27 } from "@/components/alert-27"
<Alert27 />