Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Preview

Edit Profile

Code

import Button from '@dinui/react/button'
import Dialog from '@dinui/react/dialog'
import Input from '@dinui/react/input'
import Label from '@dinui/react/label'

export default function DialogDemo() {
  return (
    <Dialog>
      <Dialog.Trigger asChild>
        <Button variant="outline">Edit Profile</Button>
      </Dialog.Trigger>
      <Dialog.Content className="sm:w-[32rem]">
        <Dialog.Title>Edit profile</Dialog.Title>
        <Dialog.Description>
          Make changes to your profile here. Click save when you're done.
        </Dialog.Description>

        <div className="grid gap-4 mt-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input id="name" value="Pedro Duarte" className="col-span-3" />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="username" className="text-right">
              Username
            </Label>
            <Input id="username" value="@peduarte" className="col-span-3" />
          </div>
        </div>

        <Dialog.Actions>
          <Dialog.Close asChild>
            <Button type="submit">Save changes</Button>
          </Dialog.Close>
        </Dialog.Actions>
      </Dialog.Content>
    </Dialog>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add dialog

   yarn

   yarn dlx @dinui/cli@latest add dialog

   pnpm

   pnpm dlx @dinui/cli@latest add dialog

   bun

   bunx @dinui/cli@latest add dialog

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-dialog tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-dialog tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-dialog tailwind-variants type-fest

   bun

   bun add @radix-ui/react-dialog tailwind-variants type-fest

3. Copy and paste the following code into your project

   'use client'
   
   import CloseButton from '@dinui/react/close-button'
   import * as DialogPrimitive from '@radix-ui/react-dialog'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const dialog = tv({
     slots: {
       content: [
         '@container',
         'z-50 fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]',
         'w-full max-w-lg border bg-bg--contrast p-6 shadow-lg sm:rounded-lg',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
         'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
       ],
       overlay: [
         'fixed inset-0 z-50 bg-[#000]/80',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       ],
       closeButton: 'absolute right-4 top-4',
       title: 'text-lg font-semibold leading-none tracking-tight text-center @md:text-left',
       description: 'text-sm text-fg-weaker mt-2 text-center @md:text-left',
       actions: 'mt-4 flex flex-col-reverse gap-2 @md:flex-row @md:justify-end',
     },
   })
   
   const DialogContent = forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     Merge<
       React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
       {
         portalProps?: React.ComponentProps<typeof DialogPrimitive.DialogPortal>
         overlayProps?: React.ComponentProps<typeof DialogPrimitive.Overlay>
         closeButtonProps?: React.ComponentProps<typeof CloseButton>
         closeProps?: React.ComponentProps<typeof DialogPrimitive.Close>
       }
     >
   >(({ portalProps, overlayProps, closeProps, closeButtonProps, children, ...props }, ref) => {
     const { content, overlay, closeButton } = dialog()
   
     return (
       <DialogPrimitive.DialogPortal {...portalProps}>
         <DialogPrimitive.Overlay
           {...overlayProps}
           className={overlay({ className: overlayProps?.className })}
         />
   
         <DialogPrimitive.Content
           {...props}
           ref={ref}
           className={content({ className: props.className })}
         >
           {children}
   
           <DialogPrimitive.Close {...closeProps} asChild>
             <CloseButton
               size="sm"
               {...closeButtonProps}
               className={closeButton({ className: closeButtonProps?.className })}
             />
           </DialogPrimitive.Close>
         </DialogPrimitive.Content>
       </DialogPrimitive.DialogPortal>
     )
   })
   DialogContent.displayName = DialogPrimitive.Content.displayName
   
   const DialogActions = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
     (props, ref) => {
       const { actions } = dialog()
   
       return <div {...props} ref={ref} className={actions({ className: props.className })} />
     },
   )
   DialogActions.displayName = 'DialogActions'
   
   const DialogTitle = forwardRef<
     React.ElementRef<typeof DialogPrimitive.Title>,
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
   >((props, ref) => {
     const { title } = dialog()
   
     return (
       <DialogPrimitive.Title {...props} ref={ref} className={title({ className: props.className })} />
     )
   })
   DialogTitle.displayName = DialogPrimitive.Title.displayName
   
   const DialogDescription = forwardRef<
     React.ElementRef<typeof DialogPrimitive.Description>,
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
   >((props, ref) => {
     const { description } = dialog()
   
     return (
       <DialogPrimitive.Description
         {...props}
         ref={ref}
         className={description({ className: props.className })}
       />
     )
   })
   DialogDescription.displayName = DialogPrimitive.Description.displayName
   
   const Dialog = Object.assign(DialogPrimitive.Root, {
     Trigger: DialogPrimitive.Trigger,
     Content: DialogContent,
     Title: DialogTitle,
     Description: DialogDescription,
     Actions: DialogActions,
     Close: DialogPrimitive.Close,
   })
   
   export default Dialog
   
   export { dialog, DialogPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.