Sora UI

Dialog

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

Made by Axyl

Default animated dialog with 3D perspective transition and backdrop blur.

Loading...

Installation

File Structure

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

Usage

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

export default function Page() {
  return (
    <Dialog>
      <DialogTrigger render={<Button>Open Dialog</Button>} />
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete your account.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter showCloseButton>
          <Button variant="destructive">Confirm</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Examples

Scrollable Body

Dialog with scrollable content area.

Loading...

Destructive Action

Alert-style destructive dialog for critical user confirmations.

Loading...

Share Modal

Interactive dialog with link copying and social sharing buttons.

Loading...

Props

Dialog

PropTypeDefault
open?
boolean
-
defaultOpen?
boolean
false
onOpenChange?
(open: boolean) => void
-

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