Cider

Shadcn Alert Dialog from anywhere using a tiny helper.

Quick Start

Get required files from registry

bunx --bun shadcn@latest add https://cider-alert.vercel.app/r/default.json

Add <ConfirmDialog /> at your app root (e.g. Next.js layout).

import { ConfirmDialog } from "@/components/common/confirm-dialog";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ConfirmDialog />
      </body>
    </html>
  );
}

Call dialog.confirm() inside any function.

import { dialog } from "@/utils/dialog";

function handleDelete() {
  dialog.confirm({
    title: "Delete item",
    description: "Are you sure you want to proceed?",
    confirmText: "Delete",
    variant: "danger",
  });
}