Mcoli UI - MC Alert Dialog

Overview

The mc-alert-dialog is a modal dialog component from the MicroClub UI library. Built on the @base-ui/react alert-dialog primitive, it provides accessible, interruptive dialogs that require user acknowledgment — perfect for confirmations, warnings, and destructive actions.

As 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

import {  McAlertDialog,  McAlertDialogAction,  McAlertDialogCancel,  McAlertDialogContent,  McAlertDialogDescription,  McAlertDialogFooter,  McAlertDialogHeader,  McAlertDialogTitle,  McAlertDialogTrigger,} from '@/registry/ui/mc-alert-dialog';import { Button } from '@/components/ui/button';export default function McAlertDialogDemo() {  return (    <McAlertDialog>      <McAlertDialogTrigger render={<Button variant="outline">Show Dialog</Button>} />      <McAlertDialogContent>        <McAlertDialogHeader>          <McAlertDialogTitle>Are you absolutely sure?</McAlertDialogTitle>          <McAlertDialogDescription>            This action cannot be undone. This will permanently delete your account from our            servers.          </McAlertDialogDescription>        </McAlertDialogHeader>        <McAlertDialogFooter>          <McAlertDialogCancel>Cancel</McAlertDialogCancel>          <McAlertDialogAction>Continue</McAlertDialogAction>        </McAlertDialogFooter>      </McAlertDialogContent>    </McAlertDialog>  );}

Add to Your Project

Deploy the mc-alert-dialog directly to your components/ui directory:

npx mcoli-ui@latest add mc-alert-dialog

pnpm dlx mcoli-ui@latest add mc-alert-dialog

yarn dlx mcoli-ui@latest add mc-alert-dialog

bunx mcoli-ui@latest add mc-alert-dialog

Manual Setup

If you prefer manual control:

Install the core dependencies

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

bun add @base-ui/react

Copy the source code

'use client';import * as React from 'react';import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';import { cn } from '@/lib/utils';import { Button } from '@/components/ui/button';function McAlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;}function McAlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;}function McAlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;}function McAlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {  return (    <AlertDialogPrimitive.Backdrop      data-slot="alert-dialog-overlay"      className={cn(        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',        className      )}      {...props}    />  );}function McAlertDialogContent({  className,  size = 'default',  ...props}: AlertDialogPrimitive.Popup.Props & {  size?: 'default' | 'sm';}) {  return (    <McAlertDialogPortal>      <McAlertDialogOverlay />      <AlertDialogPrimitive.Popup        data-slot="alert-dialog-content"        data-size={size}        className={cn(          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4',          'rounded-xl bg-background p-4 ring-1 ring-inset ring-border duration-100 outline-none shadow-[0px_4px_12px_-4px_#00000014] ',          'data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in',          'data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',          className        )}        {...props}      />    </McAlertDialogPortal>  );}function McAlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {  return (    <div      data-slot="alert-dialog-footer"      className={cn(        ' mx-6 mb-6 mt-4 flex flex-col-reverse gap-2   ',        'group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 ',        'sm:flex-row sm:justify-end',        className      )}      {...props}    />  );}function McAlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {  return (    <div      data-slot="alert-dialog-header"      className={cn(        'flex flex-col items-center gap-1.5 text-center',        // responsive alignment adjustments        'sm:group-data-[size=default]/alert-dialog-content:items-start',        'sm:group-data-[size=default]/alert-dialog-content:text-left',        className      )}      {...props}    />  );}function McAlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {  return (    <div      data-slot="alert-dialog-media"      className={cn(        ' inline-flex size-6 items-center justify-center ',        "sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",        className      )}      {...props}    />  );}function McAlertDialogTitle({  className,  media,  icon,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Title> & {  media?: boolean;  icon?: React.ReactNode;}) {  return (    <div      className={cn(        ' sm:flex items-center gap-2.5',        'group-data-[size=sm]/alert-dialog-content:flex-col'      )}    >      {media && icon && <McAlertDialogMedia className="">{icon}</McAlertDialogMedia>}      <AlertDialogPrimitive.Title        data-slot="alert-dialog-title"        className={cn(          'cn-font-heading font-bold font-dm-sans text-[18px] leading-7  text-foreground ',          'sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',          className        )}        {...props}      />    </div>  );}function McAlertDialogDescription({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {  return (    <AlertDialogPrimitive.Description      data-slot="alert-dialog-description"      className={cn(        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 ',        '*:[a]:hover:text-foreground',        className      )}      {...props}    />  );}function McAlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {  return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;}function McAlertDialogCancel({  className,  variant = 'outline',  size = 'default',  ...props}: AlertDialogPrimitive.Close.Props &  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {  return (    <AlertDialogPrimitive.Close      data-slot="alert-dialog-cancel"      className={cn('', className)}      render={<Button variant={variant} size={size} />}      {...props}    />  );}export {  McAlertDialog,  McAlertDialogAction,  McAlertDialogCancel,  McAlertDialogContent,  McAlertDialogDescription,  McAlertDialogFooter,  McAlertDialogHeader,  McAlertDialogMedia,  McAlertDialogOverlay,  McAlertDialogPortal,  McAlertDialogTitle,  McAlertDialogTrigger,};

Adjust import paths

Ensure your @/lib/utils or equivalent classname helper is correctly imported, and that @/components/ui/button points to your mc-button (or compatible Button) component.

Usage

import {
  McAlertDialog,
  McAlertDialogAction,
  McAlertDialogCancel,
  McAlertDialogContent,
  McAlertDialogDescription,
  McAlertDialogFooter,
  McAlertDialogHeader,
  McAlertDialogTitle,
  McAlertDialogTrigger,
} from '@/components/ui/mc-alert-dialog';
import { Button } from '@/components/ui/button';

export default function Example() {
  return (
    <McAlertDialog>
      <McAlertDialogTrigger render={<Button variant="outline">Show Dialog</Button>} />
      <McAlertDialogContent>
        <McAlertDialogHeader>
          <McAlertDialogTitle>Are you absolutely sure?</McAlertDialogTitle>
          <McAlertDialogDescription>
            This action cannot be undone. This will permanently delete your account from our
            servers.
          </McAlertDialogDescription>
        </McAlertDialogHeader>
        <McAlertDialogFooter>
          <McAlertDialogCancel>Cancel</McAlertDialogCancel>
          <McAlertDialogAction>Continue</McAlertDialogAction>
        </McAlertDialogFooter>
      </McAlertDialogContent>
    </McAlertDialog>
  );
}

Examples

Default Size

The default dialog size is "default", which renders at max-w-sm on larger screens.

<McAlertDialogContent size="default">...</McAlertDialogContent>

Small Size

Use size="sm" for compact dialogs. The footer will switch to a two-column grid layout automatically.

<McAlertDialogContent size="sm">...</McAlertDialogContent>

With Icon / Media

Use McAlertDialogTitle with the media and icon props to display an icon alongside the title. This is ideal for warning or destructive dialogs.

import { TriangleAlert } from 'lucide-react';

<McAlertDialogContent>
  <McAlertDialogHeader>
    <McAlertDialogTitle media icon={<TriangleAlert />}>
      Delete Account
    </McAlertDialogTitle>
    <McAlertDialogDescription>
      This action is permanent and cannot be reversed.
    </McAlertDialogDescription>
  </McAlertDialogHeader>
  <McAlertDialogFooter>
    <McAlertDialogCancel>Cancel</McAlertDialogCancel>
    <McAlertDialogAction>Delete</McAlertDialogAction>
  </McAlertDialogFooter>
</McAlertDialogContent>;

Custom Action Variants

McAlertDialogAction accepts all Button props, so you can apply variants for destructive or styled actions.

<McAlertDialogFooter>
  <McAlertDialogCancel>Cancel</McAlertDialogCancel>
  <McAlertDialogAction variant="destructive">Delete permanently</McAlertDialogAction>
</McAlertDialogFooter>

Custom Cancel Style

McAlertDialogCancel defaults to variant="outline" and size="default", but both can be overridden.

<McAlertDialogCancel variant="ghost" size="sm">
  Go back
</McAlertDialogCancel>

API Reference

`McAlertDialog`

Root component. Accepts all props from AlertDialogPrimitive.Root.

`McAlertDialogTrigger`

The element that opens the dialog. Use the render prop for custom trigger elements.

Prop	Type	Default	Description
`render`	`ReactElement`	`undefined`	Polymorphic render prop from Base UI

`McAlertDialogContent`

The dialog popup container. Rendered inside a portal with an overlay.

Prop	Type	Default	Description
`size`	`"default" \| "sm"`	`"default"`	Controls max-width and footer layout
`className`	`string`	`undefined`	Additional CSS classes

`McAlertDialogHeader`

A flex column wrapper for the title and description. Adjusts text alignment responsively based on size.

`McAlertDialogTitle`

The dialog heading. Supports an optional icon displayed inline via media and icon props.

Prop	Type	Default	Description
`media`	`boolean`	`undefined`	Enables the icon/media slot
`icon`	`ReactNode`	`undefined`	The icon element to render alongside the title
`className`	`string`	`undefined`	Additional CSS classes

Prop	Type	Default	Description
`variant`	`string`	`"default"`	Button visual style
`className`	`string`	`undefined`	Additional CSS classes

`McAlertDialogCancel`

The dismiss button. Uses AlertDialogPrimitive.Close with a Button rendered via the render prop.

Prop	Type	Default	Description
`variant`	`string`	`"outline"`	Button visual style
`size`	`string`	`"default"`	Button size
`className`	`string`	`undefined`	Additional CSS classes

MC Alert Dialog