UI

Dialog

A window displayed over the primary window, rendering the content beneath inactive.

Radix DocsAPI ReferenceGitHubStorybook

Installation

  1. 1

    Install dependencies:

    npm install @radix-ui/react-dialog
  2. 2

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    // Tremor Dialog [v0.0.1]
import React from "react"import * as DialogPrimitives from "@radix-ui/react-dialog"
import { cx, focusRing } from "@/lib/utils"
const Dialog = (  props: React.ComponentPropsWithoutRef<typeof DialogPrimitives.Root>,) => {  return <DialogPrimitives.Root {...props} />}Dialog.displayName = "Dialog"
const DialogTrigger = DialogPrimitives.Trigger
DialogTrigger.displayName = "DialogTrigger"
const DialogClose = DialogPrimitives.Close
DialogClose.displayName = "DialogClose"
const DialogPortal = DialogPrimitives.Portal
DialogPortal.displayName = "DialogPortal"
const DialogOverlay = React.forwardRef<  React.ElementRef<typeof DialogPrimitives.Overlay>,  React.ComponentPropsWithoutRef<typeof DialogPrimitives.Overlay>>(({ className, ...props }, forwardedRef) => {  return (    <DialogPrimitives.Overlay      ref={forwardedRef}      className={cx(        // base        "fixed inset-0 z-50 overflow-y-auto",        // background color        "bg-black/70",        // transition        "data-[state=open]:animate-dialogOverlayShow",        className,      )}      {...props}    />  )})
DialogOverlay.displayName = "DialogOverlay"
const DialogContent = React.forwardRef<  React.ElementRef<typeof DialogPrimitives.Content>,  React.ComponentPropsWithoutRef<typeof DialogPrimitives.Content>>(({ className, ...props }, forwardedRef) => {  return (    <DialogPortal>      <DialogOverlay>        <DialogPrimitives.Content          ref={forwardedRef}          className={cx(            // base            "fixed left-1/2 top-1/2 z-50 w-[95vw] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-md border p-6 shadow-lg",            // border color            "border-gray-200 dark:border-gray-900",            // background color            "bg-white dark:bg-[#090E1A]",            // transition            "data-[state=open]:animate-dialogContentShow",            focusRing,            className,          )}          tremor-id="tremor-raw"          {...props}        />      </DialogOverlay>    </DialogPortal>  )})
DialogContent.displayName = "DialogContent"
const DialogHeader = ({  className,  ...props}: React.HTMLAttributes<HTMLDivElement>) => {  return <div className={cx("flex flex-col gap-y-1", className)} {...props} />}
DialogHeader.displayName = "DialogHeader"
const DialogTitle = React.forwardRef<  React.ElementRef<typeof DialogPrimitives.Title>,  React.ComponentPropsWithoutRef<typeof DialogPrimitives.Title>>(({ className, ...props }, forwardedRef) => (  <DialogPrimitives.Title    ref={forwardedRef}    className={cx(      // base      "text-lg font-semibold",      // text color      "text-gray-900 dark:text-gray-50",      className,    )}    {...props}  />))
DialogTitle.displayName = "DialogTitle"
const DialogDescription = React.forwardRef<  React.ElementRef<typeof DialogPrimitives.Description>,  React.ComponentPropsWithoutRef<typeof DialogPrimitives.Description>>(({ className, ...props }, forwardedRef) => {  return (    <DialogPrimitives.Description      ref={forwardedRef}      className={cx("text-gray-500 dark:text-gray-500", className)}      {...props}    />  )})
DialogDescription.displayName = "DialogDescription"
const DialogFooter = ({  className,  ...props}: React.HTMLAttributes<HTMLDivElement>) => {  return (    <div      className={cx(        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",        className,      )}      {...props}    />  )}
DialogFooter.displayName = "DialogFooter"
export {  Dialog,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,}
  3. 3

    Update tailwind.config.ts

    import type { Config } from 'tailwindcss';export default {  // ...  theme: {    extend: {      keyframes: {        dialogOverlayShow: {          from: { opacity: "0" },          to: { opacity: "1" },        },        dialogContentShow: {          from: {            opacity: "0",            transform: "translate(-50%, -45%) scale(0.95)",          },          to: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" },        },      },      animation: {        // Dialog        dialogOverlayShow:          "dialogOverlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",        dialogContentShow:          "dialogContentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",      },    },  },  // ...} satisfies Config;

Example

API Reference: Dialog

This component uses the Radix UI API.

API Reference: DialogTrigger

This component uses the Radix UI API.

API Reference: DialogTitle

This component uses the Radix UI API.

API Reference: DialogDescription

This component uses the Radix UI API.

API Reference: DialogHeader

This component is based on the div element and supports all of its props.

API Reference: DialogClose

This component uses the Radix UI API.

API Reference: DialogContent

This component uses the Radix UI API.

API Reference: DialogFooter

This component is based on the div element and supports all of its props.