MC Alert
A component for displaying important messages.
Overview
The mc-alert is a core component of the MicroClub UI library. Built with native React and styled via Tailwind CSS v4, it delivers clear, accessible feedback messages across three semantic variants — success, default, and destructive.
As a part of the MicroClub library, this component is designed for instant deployment into your codebase, giving you full ownership of its look and behavior.
Preview
Loading...
'use client';import { McAlert } from '@/registry/ui/mc-alert';export default function McAlertDemo() { return ( <div className="p-8 space-y-4"> <h1 className="text-2xl font-bold mb-6">McAlert Component Demo</h1> <McAlert variant="success" title="Success! Your changes have been saved" description="This is an alert with icon, title and description." /> <McAlert variant="default" title="This alert has a title and an icon. No description." /> <McAlert variant="destructive" title="Unable to process your payment." description="Please verify your billing information and try again." items={['Check your card details', 'Ensure sufficient funds', 'Verify billing address']} /> <McAlert variant="success" title="Long content example to demonstrate responsive width" description="This is a very long description that should cause the alert width to expand up to the maximum of 719px before the height increases. The component will grow with the content length." /> </div> );}Add to Your Project
Deploy the mc-alert directly to your components/ui directory:
npx mcoli-ui@latest add mc-alert
pnpm dlx mcoli-ui@latest add mc-alert
yarn dlx mcoli-ui@latest add mc-alert
bunx mcoli-ui@latest add mc-alert
Manual Setup
If you prefer manual control:
Install the core dependencies
npm install lucide-react
pnpm add lucide-react
yarn add lucide-react
bun add lucide-react
Copy the source code
'use client';import * as React from 'react';import { CircleAlert, CircleCheck, Popcorn } from 'lucide-react';import { cn } from '@/lib/utils';type AlertVariant = 'success' | 'default' | 'destructive';interface McAlertProps extends React.HTMLAttributes<HTMLDivElement> { variant: AlertVariant; title: string; description?: string; items?: string[];}const variantStyles: Record<AlertVariant, string> = { success: 'border border-success rounded-lg w-fit max-w-[719px] pt-[12px] pb-[14px] pl-[12px] pr-[12px]', default: 'border border-border rounded-lg w-fit max-w-[719px] pl-[16px] pr-3 py-3', destructive: 'border border-destructive rounded-lg w-fit max-w-[719px] pl-[16px] pr-4 py-3',};const titleStyles: Record<AlertVariant, string> = { success: 'text-success font-medium text-base leading-6', default: 'text-card-foreground font-medium text-base leading-6', destructive: 'text-destructive font-medium text-base leading-6',};const descStyles: Record<AlertVariant, string> = { success: 'text-success font-normal text-sm leading-5', default: 'text-muted-foreground font-normal text-sm leading-5', destructive: 'text-destructive font-normal text-sm leading-5',};const iconMap: Record<AlertVariant, React.ReactNode> = { success: <CircleCheck className="size-4 shrink-0 stroke-2 text-success" />, default: <Popcorn className="size-4 shrink-0 stroke-2 text-card-foreground" />, destructive: <CircleAlert className="size-4 shrink-0 stroke-2 text-destructive" />,};const iconGap: Record<AlertVariant, string> = { success: 'gap-1', default: 'gap-3', destructive: 'gap-3',};function McAlert({ variant, title, description, items, className, ...props }: McAlertProps) { const hasSupportingContent = !!description || !!items?.length; return ( <div data-slot="mc-alert" data-variant={variant} className={cn(variantStyles[variant], className)} role="alert" {...props} > <div className={cn( 'flex', hasSupportingContent ? 'items-start' : 'items-center', iconGap[variant] )} > <div className={cn('shrink-0', hasSupportingContent && 'pt-1')}>{iconMap[variant]}</div> <div className="min-w-0"> <span className={cn('block', titleStyles[variant])}>{title}</span> {description && <p className={cn('mt-0.5', descStyles[variant])}>{description}</p>} {items && items.length > 0 && ( <ul className={cn('mt-0.5 list-disc pl-6', descStyles[variant])}> {items.map((item, i) => ( <li key={i}>{item}</li> ))} </ul> )} </div> </div> </div> );}export { McAlert };export type { McAlertProps, AlertVariant };Adjust import paths
Ensure your @/lib/utils or equivalent classname helper is correctly imported.
Usage
import { McAlert } from '@/components/ui/mc-alert';
export default function Example() {
return (
<McAlert
variant="success"
title="Success! Your changes have been saved"
description="This is an alert with icon, title and description."
/>
);
}Examples
Variants
<McAlert variant="success" title="Success! Your changes have been saved" />
<McAlert variant="default" title="This Alert has a title and an icon. No description." />
<McAlert variant="destructive" title="Unable to process your payment." />With Description
<McAlert
variant="success"
title="Success! Your changes have been saved"
description="This is an alert with icon, title and description."
/>With Bullet List
The items prop renders a bullet list below the description. Designed for the destructive variant but supported by all.
<McAlert
variant="destructive"
title="Unable to process your payment."
description="Please verify your billing information and try again."
items={['Check your card details', 'Ensure sufficient funds', 'Verify billing address']}
/>Default (No Description)
<McAlert variant="default" title="This Alert has a title and an icon. No description." />API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "success" | "default" | "destructive" | — | The semantic style of the alert |
title | string | — | The heading text of the alert |
description | string | undefined | Supporting body text displayed below the title |
items | string[] | undefined | Bullet list items rendered below the description |
className | string | undefined | Additional CSS classes applied to the root element |
All standard HTMLDivElement props are supported.