Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ephraimduncan/blocks/llms.txt

Use this file to discover all available pages before exploring further.

A dialog confirmation component featuring a centered layout with a success icon, title, description, and call-to-action button.

​
Installation

npx shadcn@latest add @blocks/dialog-01

​
Dependencies

This component requires the following dependencies:
  • button - shadcn/ui button component
  • dialog - shadcn/ui dialog component
  • lucide-react - Icon library

​
Usage

import Dialog01 from "@/components/dialog-01";

export default function Page() {
  return <Dialog01 />;
}

​
Features

  • Centered layout - All content is centered for visual balance
  • Success icon - Green checkmark in circular background
  • Controlled state - Uses React state to manage open/close
  • Responsive design - Adapts to different screen sizes with sm:max-w-sm
  • Accessible - Built on Radix UI primitives with proper ARIA attributes

​
Component Structure

The component includes:
  • Dialog wrapper with controlled open state
  • DialogTrigger button to show the dialog
  • DialogContent with centered content layout
  • Success icon (Check) in green circular background
  • DialogHeader with title and description
  • DialogFooter with primary action button
  • DialogClose to handle dismissal
The dialog state is initialized as true for demonstration purposes. In production, you’ll want to control this based on user actions.