Component Library
Browse and explore components
Alert
An Alert is a UI component used to display important messages or warnings to users.
Basic Alert
Primary Alert!
Use our highly customizable component
Secondary Alert!
Use our highly customizable component
Success Alert!
Use our highly customizable component
Warning Alert!
Use our highly customizable component
Error Alert!
Use our highly customizable component
Info Alert!
Use our highly customizable component
Component Code
import React from 'react'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Terminal } from 'lucide-react'
const BasicAlertCode = () => {
return (
<>
<div className='flex flex-col gap-3 mt-4'>
<Alert variant='primary'>
<Terminal className='h-4 w-4' />
<AlertTitle className='text-white'>Primary Alert!</AlertTitle>
<AlertDescription>
Use our highly customizable component
</AlertDescription>
</Alert>
<Alert variant='secondary'>
<Terminal className='h-4 w-4' />
<AlertTitle className='text-white'>Secondary Alert!</AlertTitle>
<AlertDescription>
Use our highly customizable component
</AlertDescription>
</Alert>
<Alert variant='success'>
<Terminal className='h-4 w-4' />
<AlertTitle className='text-white'>Success Alert!</AlertTitle>
<AlertDescription>
Use our highly customizable component
</AlertDescription>
</Alert>
<Alert variant='warning'>
<Terminal className='h-4 w-4' />
<AlertTitle className='text-white'>Warning Alert!</AlertTitle>
<AlertDescription>
Use our highly customizable component
</AlertDescription>
</Alert>
<Alert variant='error'>
<Terminal className='h-4 w-4' />
<AlertTitle className='text-white'>Error Alert!</AlertTitle>
<AlertDescription>
Use our highly customizable component
</AlertDescription>
</Alert>
<Alert variant='info'>
<Terminal className='h-4 w-4' />
<AlertTitle className='text-white'>Info Alert!</AlertTitle>
<AlertDescription>
Use our highly customizable component
</AlertDescription>
</Alert>
</div>
</>
)
}
export default BasicAlertCode
Light Alert
Primary Alert!
Use our highly customizable component
Secondary Alert!
Use our highly customizable component
Success Alert!
Use our highly customizable component
Warning Alert!
Use our highly customizable component
Error Alert!
Use our highly customizable component
Info Alert!
Use our highly customizable component
Component Code
import React from 'react'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Terminal } from 'lucide-react'
const BasicAlertCode = () => {
return (
<>
<div className='flex flex-col gap-3 mt-4'>
<Alert variant='lightprimary'>
<Terminal className='h-4 w-4' />
<AlertTitle className='text-primary'>Primary Alert!</AlertTitle>
<AlertDescription>
Use our highly customizable component
</AlertDescription>
</Alert>
<Alert variant='lightsecondary'>
<Terminal className='h-4 w-4' />
<AlertTitle className='text-secondary'>Secondary Alert!</AlertTitle>
<AlertDescription>
Use our highly customizable component
</AlertDescription>
</Alert>
<Alert variant='lightsuccess'>
<Terminal className='h-4 w-4' />
<AlertTitle className='text-success'>Success Alert!</AlertTitle>
<AlertDescription>
Use our highly customizable component
</AlertDescription>
</Alert>
<Alert variant='lightwarning'>
<Terminal className='h-4 w-4' />
<AlertTitle className='text-warning'>Warning Alert!</AlertTitle>
<AlertDescription>
Use our highly customizable component
</AlertDescription>
</Alert>
<Alert variant='lighterror'>
<Terminal className='h-4 w-4' />
<AlertTitle className='text-error'>Error Alert!</AlertTitle>
<AlertDescription>
Use our highly customizable component
</AlertDescription>
</Alert>
<Alert variant='lightinfo'>
<Terminal className='h-4 w-4' />
<AlertTitle className='text-info'>Info Alert!</AlertTitle>
<AlertDescription>
Use our highly customizable component
</AlertDescription>
</Alert>
</div>
</>
)
}
export default BasicAlertCode