Alert 11

PreviousNext

Success indicator alert with left border highlight and green success styling.

Docs
shadcn-studiocomponent

Preview

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

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

const AlertIndicatorSuccessDemo = () => {
  return (
    <Alert className='rounded-md border-l-6 border-green-600 bg-green-600/10 text-green-600 dark:border-green-400 dark:bg-green-400/10 dark:text-green-400'>
      <UserCheckIcon />
      <AlertTitle>Your request to join the team is approved.</AlertTitle>
    </Alert>
  )
}

export default AlertIndicatorSuccessDemo

Installation

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

Usage

import { Alert11 } from "@/components/alert-11"
<Alert11 />