AlertInline messages for feedback and status.
Alert
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
import Alert, { AlertDescription } from '@/components/Alert'; export function Example() { return ( <Alert> <AlertDescription> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </AlertDescription> </Alert> );}
Alert (with title and icon)
Lorem Information
Important information about lorem ipsum generation and usage. Please review the following details carefully.
import Alert, { AlertTitle, AlertDescription } from '@/components/Alert';import { Info } from 'lucide-react'; export function Example() { return ( <Alert> <Info /> <AlertTitle>Lorem Information</AlertTitle> <AlertDescription> Important information about lorem ipsum generation and usage. Please review the following details carefully. </AlertDescription> </Alert> );}
Alert ($type="destructive")
Lorem Error
An error occurred while processing your lorem ipsum request. Please check your input and try again.
import Alert, { AlertTitle, AlertDescription } from '@/components/Alert';import Button from '@/components/Button';import { AlertCircle } from 'lucide-react'; export function Example() { return ( <Alert $type="destructive"> <AlertCircle /> <AlertTitle>Lorem Error</AlertTitle> <AlertDescription> An error occurred while processing your lorem ipsum request. Please check your input and try again. </AlertDescription> </Alert> );}
Alert ($type="warning")
Lorem Warning
Your lorem ipsum quota is running low. Consider upgrading your plan to continue generating unlimited text.
import Alert, { AlertTitle, AlertDescription } from '@/components/Alert';import { TriangleAlert } from 'lucide-react'; export function Example() { return ( <Alert $type="warning"> <TriangleAlert /> <AlertTitle>Lorem Warning</AlertTitle> <AlertDescription> Your lorem ipsum quota is running low. Consider upgrading your plan to continue generating unlimited text. </AlertDescription> </Alert> );}
Alert (success example)
Lorem Success
Your lorem ipsum text has been generated successfully! You can now copy and use it in your projects.
import Alert, { AlertTitle, AlertDescription } from '@/components/Alert';import { CheckCircle } from 'lucide-react'; export function Example() { return ( <Alert> <CheckCircle style={{ color: 'var(--color-green-light)' }} /> <AlertTitle>Lorem Success</AlertTitle> <AlertDescription> Your lorem ipsum text has been generated successfully! You can now copy and use it in your projects. </AlertDescription> </Alert> );}