Acronis UIKit
Legacy (shadcn-uikit)Components

Dialog

A modal window that overlays the page to capture user input or display information.

Usage

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from '@acronis-platform/shadcn-uikit';

Basic

A simple dialog with a title and description.

Preview
View source
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogBody,
  DialogCloseButton,
  DialogTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

export function DialogBasic() {
  return (
    <Dialog>
      <DialogTrigger render={<Button />}>Open Dialog</DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogCloseButton />
        </DialogHeader>
        <DialogBody>
          <p className="text-sm text-gray-600">
            This is a basic dialog with some content. You can add any content
            you want here.
          </p>
        </DialogBody>
        <DialogFooter>
          <DialogTrigger render={<Button variant="outline" />}>
            Cancel
          </DialogTrigger>
          <Button>Confirm</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Sizes

Dialogs in different width configurations.

Preview
View source
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogBody,
  DialogCloseButton,
  DialogTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

export function DialogSizes() {
  return (
    <div className="flex flex-wrap gap-4">
      <Dialog>
        <DialogTrigger render={<Button variant="outline" />}>
          Small (464px)
        </DialogTrigger>
        <DialogContent className="max-w-[464px]">
          <DialogHeader>
            <DialogTitle>Small Dialog</DialogTitle>
            <DialogCloseButton />
          </DialogHeader>
          <DialogBody>
            <p className="text-sm text-gray-600">
              This is a small dialog (464px width).
            </p>
          </DialogBody>
          <DialogFooter>
            <Button>Done</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog>
        <DialogTrigger render={<Button variant="outline" />}>
          Medium (672px)
        </DialogTrigger>
        <DialogContent className="max-w-[672px]">
          <DialogHeader>
            <DialogTitle>Medium Dialog</DialogTitle>
            <DialogCloseButton />
          </DialogHeader>
          <DialogBody>
            <p className="text-sm text-gray-600">
              This is a medium dialog (672px width).
            </p>
          </DialogBody>
          <DialogFooter>
            <Button>Done</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog>
        <DialogTrigger render={<Button variant="outline" />}>
          Large (832px)
        </DialogTrigger>
        <DialogContent className="max-w-[832px]">
          <DialogHeader>
            <DialogTitle>Large Dialog</DialogTitle>
            <DialogCloseButton />
          </DialogHeader>
          <DialogBody>
            <p className="text-sm text-gray-600">
              This is a large dialog (832px width).
            </p>
          </DialogBody>
          <DialogFooter>
            <Button>Done</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

Form dialog

A dialog containing a form for data entry.

Preview
View source
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogBody,
  DialogCloseButton,
  DialogTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Button, Input } from '@acronis-platform/shadcn-uikit/react';

export function DialogForm() {
  return (
    <Dialog>
      <DialogTrigger render={<Button />}>Create Account</DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Create Account</DialogTitle>
          <DialogCloseButton />
        </DialogHeader>
        <DialogBody>
          <form className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="name" className="text-sm font-medium">
                Name
              </label>
              <Input id="name" placeholder="Enter your name" />
            </div>
            <div className="space-y-2">
              <label htmlFor="email" className="text-sm font-medium">
                Email
              </label>
              <Input id="email" type="email" placeholder="Enter your email" />
            </div>
            <div className="space-y-2">
              <label htmlFor="password" className="text-sm font-medium">
                Password
              </label>
              <Input
                id="password"
                type="password"
                placeholder="Enter your password"
              />
            </div>
          </form>
        </DialogBody>
        <DialogFooter>
          <DialogTrigger render={<Button variant="outline" />}>
            Cancel
          </DialogTrigger>
          <Button>Create Account</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Confirmation

A confirmation dialog for destructive actions.

Preview
View source
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogBody,
  DialogCloseButton,
  DialogTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { ExclamationCircleIcon } from '@acronis-platform/shadcn-uikit';
export function DialogConfirmation() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="destructive" />}>
        Delete Item
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Confirm Deletion</DialogTitle>
          <DialogCloseButton />
        </DialogHeader>
        <DialogBody>
          <div className="flex items-start gap-4">
            <ExclamationCircleIcon className="h-6 w-6 text-red-500 flex-shrink-0 mt-1" />
            <div className="space-y-2">
              <p className="text-sm font-medium">
                Are you sure you want to delete this item?
              </p>
              <p className="text-sm text-gray-600">
                This action cannot be undone. This will permanently delete the
                item and remove all associated data.
              </p>
            </div>
          </div>
        </DialogBody>
        <DialogFooter>
          <DialogTrigger render={<Button variant="outline" />}>
            Cancel
          </DialogTrigger>
          <Button variant="destructive">Delete</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Loading

A dialog displaying a loading state.

Preview
View source
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogBody,
  DialogCloseButton,
  DialogTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { RotateIcon } from '@acronis-platform/shadcn-uikit';
export function DialogLoading() {
  return (
    <Dialog>
      <DialogTrigger render={<Button />}>Process Data</DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Processing</DialogTitle>
          <DialogCloseButton />
        </DialogHeader>
        <DialogBody>
          <div className="flex flex-col items-center justify-center py-8 space-y-4">
            <RotateIcon className="h-12 w-12 animate-spin text-[#2668C5]" />
            <p className="text-sm text-gray-600">
              Please wait while we process your request...
            </p>
          </div>
        </DialogBody>
        <DialogFooter>
          <Button disabled>Processing...</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Success

A dialog displaying a success message.

Preview
View source
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogBody,
  DialogCloseButton,
  DialogTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { CheckCircleIcon } from '@acronis-platform/shadcn-uikit';
export function DialogSuccess() {
  return (
    <Dialog>
      <DialogTrigger render={<Button />}>Complete Task</DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Success</DialogTitle>
          <DialogCloseButton />
        </DialogHeader>
        <DialogBody>
          <div className="flex flex-col items-center justify-center py-8 space-y-4">
            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
              <CheckCircleIcon className="h-10 w-10 text-green-600" />
            </div>
            <div className="text-center space-y-2">
              <p className="text-sm font-medium">Task Completed Successfully</p>
              <p className="text-sm text-gray-600">
                Your changes have been saved and applied.
              </p>
            </div>
          </div>
        </DialogBody>
        <DialogFooter>
          <DialogTrigger render={<Button />}>Close</DialogTrigger>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Info

An informational dialog.

Preview
View source
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogBody,
  DialogCloseButton,
  DialogTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { InfoIcon } from '@acronis-platform/shadcn-uikit';
export function DialogInfo() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>
        View Info
      </DialogTrigger>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Information</DialogTitle>
          <DialogCloseButton />
        </DialogHeader>
        <DialogBody>
          <div className="space-y-4">
            <div className="flex items-start gap-3">
              <InfoIcon className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
              <div className="space-y-2">
                <p className="text-sm font-medium">Important Information</p>
                <p className="text-sm text-gray-600">
                  This dialog provides important information about the system.
                  Please read carefully before proceeding.
                </p>
              </div>
            </div>
            <ul className="list-disc list-inside space-y-1 text-sm text-gray-600 ml-8">
              <li>Feature A is now available</li>
              <li>Feature B has been updated</li>
              <li>Feature C will be deprecated soon</li>
            </ul>
          </div>
        </DialogBody>
        <DialogFooter>
          <DialogTrigger render={<Button />}>Got it</DialogTrigger>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

With textarea

A dialog containing a textarea input.

Preview
View source
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogBody,
  DialogCloseButton,
  DialogTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Button, Input, Textarea } from '@acronis-platform/shadcn-uikit/react';

export function DialogWithTextarea() {
  return (
    <Dialog>
      <DialogTrigger render={<Button />}>Leave Feedback</DialogTrigger>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Provide Feedback</DialogTitle>
          <DialogCloseButton />
        </DialogHeader>
        <DialogBody>
          <div className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="subject" className="text-sm font-medium">
                Subject
              </label>
              <Input id="subject" placeholder="Brief description" />
            </div>
            <div className="space-y-2">
              <label htmlFor="feedback" className="text-sm font-medium">
                Feedback
              </label>
              <Textarea
                id="feedback"
                placeholder="Share your thoughts..."
                className="min-h-[120px]"
              />
            </div>
          </div>
        </DialogBody>
        <DialogFooter>
          <DialogTrigger render={<Button variant="outline" />}>
            Cancel
          </DialogTrigger>
          <Button>Submit Feedback</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Scrollable

A dialog with scrollable content for long text.

Preview
View source
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogBody,
  DialogCloseButton,
  DialogTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

export function DialogScrollable() {
  return (
    <Dialog>
      <DialogTrigger render={<Button />}>View Terms</DialogTrigger>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Terms and Conditions</DialogTitle>
          <DialogCloseButton />
        </DialogHeader>
        <DialogBody className="max-h-[400px]">
          <div className="space-y-4 text-sm text-gray-600">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <p>
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>
              Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur.
            </p>
            <p>
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
              officia deserunt mollit anim id est laborum.
            </p>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
              accusantium doloremque laudantium.
            </p>
            <p>
              Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
              quasi architecto beatae vitae dicta sunt explicabo.
            </p>
            <p>
              Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
              aut fugit, sed quia consequuntur magni dolores eos qui ratione
              voluptatem sequi nesciunt.
            </p>
          </div>
        </DialogBody>
        <DialogFooter>
          <DialogTrigger render={<Button variant="outline" />}>
            Decline
          </DialogTrigger>
          <Button>Accept</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

API Reference

DialogContent

Prop

Type

The Dialog is built on Base UI Dialog primitives. Dialog wraps Dialog.Root, DialogTrigger wraps Dialog.Trigger. DialogHeader, DialogFooter, and DialogBody accept standard HTML div attributes. DialogTitle and DialogDescription extend their respective Base UI primitive props.

Edit on GitHub

Toggle Group

A group of toggle buttons where one or multiple items can be pressed.

DropdownMenu

Displays a list of actions or options triggered by a button.

On this page

UsageBasicSizesForm dialogConfirmationLoadingSuccessInfoWith textareaScrollableAPI ReferenceDialogContent