Sora UI

Dialog

An accessible modal dialog component built with Radix UI and Motion for React with 3D perspective spring flip entrances and backdrop blurs.

Made by Axyl

Default animated Radix UI modal dialog featuring 3D spring entrance and smooth backdrop blur.

Loading...

Installation

File Structure

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

Usage

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

export default function Page() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save when you're done.
          </DialogDescription>
        </DialogHeader>
        <div className="py-4">
          <p className="text-muted-foreground text-sm">Modal body content here.</p>
        </div>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button type="submit">Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Examples

Scrollable Content

Dialog with scrollable body area for lengthy terms or policies.

Loading...

Destructive Confirmation

Alert-style dialog for critical confirmations like deleting a repository.

Loading...

Dialog with input link copying and success toast states.

Loading...

Props

Dialog

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

DialogContent

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

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

Last updated: 8/20/2026