Sora UI

Dialog

An accessible modal dialog built on Base UI with smooth Motion spring 3D entrance and exit animations.

Made by Axyl

Interactive modal dialog with 3D perspective rotation, form inputs, and Motion spring exit transitions.

Loading...

Installation

File Structure

dialog.tsx
button.tsx
use-controlled-state.tsx

Usage

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/sora-ui/base/dialog";

export default function BasicDialog() {
  return (
    <Dialog>
      <DialogTrigger className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground">
        Open Dialog
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Notification Preferences</DialogTitle>
          <DialogDescription>
            Manage how you receive alerts and account updates.
          </DialogDescription>
        </DialogHeader>
        <p className="text-sm text-muted-foreground">
          Your settings have been synchronized across all devices.
        </p>
      </DialogContent>
    </Dialog>
  );
}

Examples

Dialog with a copyable project link and custom Done close button.

Loading...

Destructive Confirmation

Destructive alert confirmation modal for irreversible actions.

Loading...

Scrollable Body

Dialog with scrollable content container and fixed header/footer actions.

Loading...

Props

Dialog

PropTypeDefault
open?
boolean
-
defaultOpen?
boolean
false
onOpenChange?
(open: boolean, eventDetails: Dialog.Root.ChangeEventDetails) => void
-
dismissible?
boolean
true
modal?
boolean
true

DialogContent

PropTypeDefault
showCloseButton?
boolean
true
overlayClassName?
string
-
containerClassName?
string
-
className?
string
-

Built by Axyl. A motion-first component registry for React.

Last updated: 8/20/2026