Dialog

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

import { Bookmark } from "lucide-react";
import Dialog from "@tailus-ui/Dialog";
import Button from "@tailus-ui/Button";

export const Overview = () => (
    <Dialog.Root>
    <Dialog.Trigger asChild>
        <Button.Root variant="ghost" intent="gray">
            <Button.Icon type="only">
                <Bookmark />
            </Button.Icon>
        </Button.Root>
    </Dialog.Trigger>
    <Dialog.Portal>
      <Dialog.Overlay/>
      <Dialog.Content className="max-w-sm">
        <Dialog.Title>Sign in to bookmark</Dialog.Title>
        <Dialog.Description className="mt-2">You need to be signed in to save your frequently used components.</Dialog.Description>

        <Dialog.Actions>
          <Dialog.Close asChild>
            <Button.Root variant="outlined" size="sm" intent="gray">
              <Button.Label>Cancel</Button.Label>
            </Button.Root>
          </Dialog.Close>
          <Dialog.Close asChild>
            <Button.Root size="sm">
              <Button.Label>Sign In</Button.Label>
            </Button.Root>
          </Dialog.Close>
        </Dialog.Actions>
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
)

Installation

Install the primitive and Copy-Paste the component code in a .tsx file.

npm install @radix-ui/react-dialog
import * as DialogPrimitive from "@radix-ui/react-dialog";
import React from "react";
import Button from "@tailus-ui/Button";
import {
  dialog,
  title,
  text,
  type DialogProps,
  type TitleSizeProp,
  type TextProps,
  type TextSizeProp,
  type TextAlignProp,
  type TextWeightProp
} from "@tailus/themer"

const DialogRoot = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentProps<typeof DialogPrimitive.Overlay>
  >(({ className, ...props }, forwardedRef) => {
    
    const { overlay } = dialog()

    return (
      <DialogPrimitive.Overlay
          {...props}
          ref={forwardedRef}
          className={overlay({ className })}
      />
    )
  });

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentProps<typeof DialogPrimitive.Content> & DialogProps
  >(({ className, fancy, mixed, ...props }, forwardedRef) => {
    const { content } = dialog()
    
    if (fancy && mixed) {
      throw new Error('The fancy and mixed props cannot be used together.');
    }
    
    return(
      <DialogPrimitive.Content
        {...props}
        ref={forwardedRef}
        className={content({ fancy, mixed, className })}
      />
    )
  });

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentProps<typeof DialogPrimitive.Title> & {
    size?: TitleSizeProp,
    align?: TextAlignProp,
    weight?: TextWeightProp
  }
>(({className, size="base", align, weight="medium", ...props}, forwardedRef) => (
  <DialogPrimitive.Title
    {...props}
    ref={forwardedRef}
    className={
      title({
        size,
        align,
        weight,
        className
      })
    }
  />
));

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentProps<typeof DialogPrimitive.Description> & TextProps & {
    size?: TextSizeProp,
    align?: TextAlignProp,
    weight?: TextWeightProp
  }
>(({className, size, weight, align, neutral, ...props}, forwardedRef) => (
  <DialogPrimitive.Description
    {...props}
    ref={forwardedRef}
    className={
      text({
        size,
        weight,
        align,
        neutral,
        className
      })
    }
  />
));

const DialogActions = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentProps<"div">
  >(({ className, ...props }, forwardedRef) => {
      const { actions } = dialog()
    return (
      <div
        {...props}
        ref={forwardedRef}
        className={actions({className})}
        />
      )
  });

type DialogCloseButtonProps = React.ComponentProps<typeof Button.Root>;

const DialogCloseButton: React.FC<DialogCloseButtonProps> = ({ className, ...props }) => {
  const { close } = dialog()

  return(
    <Button.Root
        {...props}
        className={close({ className })}
        variant="ghost"
        size="sm"
    >
      <Button.Icon type="only" size="xs">
        {props.children}
      </Button.Icon>
    </Button.Root>
  )
};

export default {
  Root: DialogRoot,
  Trigger: DialogTrigger,
  Portal: DialogPortal,
  Overlay: DialogOverlay,
  Content: DialogContent,
  Title: DialogTitle,
  Description: DialogDescription,
  Actions: DialogActions,
  CloseButton: DialogCloseButton,
  Close: DialogClose,
}

export {
  DialogRoot,
  DialogTrigger,
  DialogPortal,
  DialogOverlay,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogActions,
  DialogCloseButton,
  DialogClose,
}

Usage

Import all the parts and build your Dialog.

import { Bookmark } from "lucide-react";
import Dialog from "@tailus-ui/Dialog";
import Button from "@tailus-ui/Button";

export const Overview = () => (
    <Dialog.Root>
    <Dialog.Trigger asChild>
        <Button.Root variant="ghost" intent="gray">
            <Button.Icon type="only">
                <Bookmark />
            </Button.Icon>
        </Button.Root>
    </Dialog.Trigger>
    <Dialog.Portal>
      <Dialog.Overlay/>
      <Dialog.Content className="max-w-sm">
        <Dialog.Title>Sign in to bookmark</Dialog.Title>
        <Dialog.Description className="mt-2">You need to be signed in to save your frequently used components.</Dialog.Description>

        <Dialog.Actions>
          <Dialog.Close asChild>
            <Button.Root variant="outlined" size="sm" intent="gray">
              <Button.Label>Cancel</Button.Label>
            </Button.Root>
          </Dialog.Close>
          <Dialog.Close asChild>
            <Button.Root size="sm">
              <Button.Label>Sign In</Button.Label>
            </Button.Root>
          </Dialog.Close>
        </Dialog.Actions>
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
)

Reference

Content

The content of the Dialog component

Prop
Type
Default
mixed
boolean
-
fancy
boolean
-

Title

The title of the Dialog component

Prop
Type
Default
size ~
enum
4xl
align ~
enum
left
weight ~
enum

Description

The description of the Dialog component

Prop
Type
Default
size ~
enum
base
align ~
enum
left
weight ~
enum

Actions

The parent component of the action buttons.

Examples

New project

import { Caption } from '@tailus-ui/typography';
import Button from '@tailus-ui/Button';
import Aligner from '@tailus-ui/Aligner';
import Label from '@react-ui/Label';
import Separator from '@tailus-ui/Separator';
import Checkbox from '@tailus-ui/Checkbox';
import Dialog from '@tailus-ui/Dialog';
import { Check, Plus } from 'lucide-react';
import Input from '@tailus-ui/Input';
import Textarea from '@tailus-ui/Textarea';

export const NewProject = () => {
    return (
        <Dialog.Root>
            <Dialog.Trigger asChild>
                <Button.Root size="sm">
                    <Button.Icon>
                        <Plus />
                    </Button.Icon>
                    <Button.Label>New Project</Button.Label>
                </Button.Root>
            </Dialog.Trigger>
            <Dialog.Portal>
                <Dialog.Overlay className="z-40" />
                <Dialog.Content mixed className="z-50 max-w-lg">
                    <Dialog.Title>New project</Dialog.Title>
                    <Dialog.Description size="sm" className="mt-1">
                        Create a new project to host
                    </Dialog.Description>

                    <Separator dashed className="my-6" />

                    <form>
                        <div className="space-y-6">
                            <div className="space-y-2.5">
                                <Label size="md" htmlFor="url">
                                    Repository url *
                                </Label>
                                <Input type="url" id="url" required />
                                <Caption as="p">Description</Caption>
                            </div>
                            <Aligner>
                                <Checkbox.Root id="visibility">
                                    <Checkbox.Indicator>
                                        <Check className="size-3.5" strokeWidth={3} />
                                    </Checkbox.Indicator>
                                </Checkbox.Root>
                                <Label htmlFor="visibility">Create a private project</Label>
                                <Caption as="p" className="col-start-2">
                                    As a private project, only admins could rewrite
                                </Caption>
                            </Aligner>
                            <div className="space-y-2.5">
                                <Label size="md" htmlFor="message">
                                    Description
                                </Label>
                                <Textarea required id="message" placeholder="Add your project description" className="h-28 max-h-36 min-h-12" />
                            </div>
                        </div>
                    </form>

                    <Dialog.Actions className="-mx-[--card-padding] border-t px-[--card-padding] pt-[--card-padding]">
                        <Dialog.Close asChild>
                            <Button.Root variant="outlined" intent="gray" size="sm">
                                <Button.Label>Cancel</Button.Label>
                            </Button.Root>
                        </Dialog.Close>
                        <Button.Root variant="solid" intent="primary" size="sm">
                            <Button.Label>Next</Button.Label>
                        </Button.Root>
                    </Dialog.Actions>
                </Dialog.Content>
            </Dialog.Portal>
        </Dialog.Root>
    );
};

New project 2

import { Caption } from '@tailus-ui/typography';
import Button from '@tailus-ui/Button';
import Label from '@tailus-ui/Label';
import Separator from '@tailus-ui/Separator';
import Dialog from './Dialog';
import Input from '@tailus-ui/Input';
import Select from '@tailus-ui/Select';
import Calendar from '@tailus-ui/Calendar';
import { useState } from 'react';
import { format } from 'date-fns';
import Popover from '@tailus-ui/Popover';
import { Plus, Calendar as CalendarIcon } from 'lucide-react';

const countries = [
    { flag: 'πŸ‡¨πŸ‡©', name: 'DR Congo' },
    { flag: 'πŸ‡¨πŸ‡¬', name: 'Congo Braza' },
    { flag: 'πŸ‡¦πŸ‡΄', name: 'Angola' },
    { flag: 'πŸ‡«πŸ‡·', name: 'France' },
    { flag: 'πŸ‡¬πŸ‡§', name: 'United Kingdom' },
    { flag: 'πŸ‡ͺπŸ‡Έ', name: 'Spain' }
];

type Entry = {
    flag: string;
    name: string;
};

const SelectItem = ({ entry }: { entry: Entry }) => {
    return (
        <Select.Item value={entry.name} className="items-center pl-7">
            <Select.ItemIndicator />
            <Select.ItemText>
                <span role="img" aria-label={entry.name} className="mr-2">
                    {entry.flag}
                </span>
                {entry.name}
            </Select.ItemText>
        </Select.Item>
    );
};

export const NewProject2 = () => {
    const [selected, setSelected] = useState<Date>(new Date());
    return (
        <Dialog.Root>
            <Dialog.Trigger asChild>
                <Button.Root size="sm">
                    <Button.Icon>
                        <Plus />
                    </Button.Icon>
                    <Button.Label>New Project</Button.Label>
                </Button.Root>
            </Dialog.Trigger>
            <Dialog.Portal>
                <Dialog.Overlay className="z-40" />
                <Dialog.Content mixed className="z-50 max-w-lg">
                    <Dialog.Title>New project</Dialog.Title>
                    <Dialog.Description size="sm" className="mt-1">
                        Create a new project to host
                    </Dialog.Description>

                    <Separator dashed className="my-6" />

                    <form>
                        <div className="space-y-6">
                            <div className="space-y-2.5">
                                <Label size="md" htmlFor="date">
                                    Host date
                                </Label>
                                <div className="relative">
                                    <Input type="text" id="date" defaultValue={format(selected, 'PPP')} />
                                    <div className="absolute inset-y-0.5 right-0.5">
                                        <Popover.Root>
                                            <Popover.Trigger asChild>
                                                <Button.Root className="rounded-[calc(var(--btn-radius)-2px)]" variant="ghost" intent="gray" size="sm">
                                                    <Button.Icon type="only" size="sm">
                                                        <CalendarIcon />
                                                    </Button.Icon>
                                                </Button.Root>
                                            </Popover.Trigger>
                                            <Popover.Portal>
                                                <Popover.Content sideOffset={6} mixed className="z-50 max-w-fit">
                                                    <Calendar initialFocus mode="single" defaultMonth={selected} selected={selected} onSelect={(day: Date) => setSelected(day)} intent="primary" fancy />
                                                </Popover.Content>
                                            </Popover.Portal>
                                        </Popover.Root>
                                    </div>
                                </div>
                                <Caption>Description if any</Caption>
                            </div>
                            <div className="space-y-2.5">
                                <Label size="md">Country</Label>
                                <Select.Root defaultValue="DR Congo">
                                    <Select.Trigger className="w-full rounded-[--btn-radius]">
                                        <Select.Value placeholder="Country" />
                                        <Select.Icon />
                                    </Select.Trigger>

                                    <Select.Portal>
                                        <Select.Content mixed className="z-50">
                                            <Select.Viewport>
                                                {countries.map((country) => (
                                                    <SelectItem entry={country} key={country.name} />
                                                ))}
                                            </Select.Viewport>
                                        </Select.Content>
                                    </Select.Portal>
                                </Select.Root>
                                <Caption>Selecting a region will optimize where your database is stored.</Caption>
                            </div>
                        </div>
                    </form>

                    <Dialog.Actions className="-mx-[--card-padding] border-t px-[--card-padding] pt-[--card-padding]">
                        <Dialog.Close asChild>
                            <Button.Root variant="outlined" intent="gray" size="sm">
                                <Button.Label>Previous</Button.Label>
                            </Button.Root>
                        </Dialog.Close>
                        <Button.Root variant="solid" intent="primary" size="sm">
                            <Button.Label>Host</Button.Label>
                        </Button.Root>
                    </Dialog.Actions>
                </Dialog.Content>
            </Dialog.Portal>
        </Dialog.Root>
    );
};

Edit Repository

import { Caption } from '@tailus-ui/typography';
import Button from '@tailus-ui/Button';
import Aligner from '@tailus-ui/form';
import Label from '@tailus-ui/Label';
import Separator from '@tailus-ui/Separator';
import Checkbox from '@tailus-ui/Checkbox';
import Input from '@tailus-ui/Input';
import Textarea from '@tailus-ui/Textarea';
import Dialog from '@tailus-ui/Dialog';
import { Check, Pencil } from 'lucide-react';

export const RepositoryEdit = () => {
    return (
        <Dialog.Root>
            <Dialog.Trigger asChild>
                <Button.Root size="sm">
                    <Button.Icon size="xs">
                        <Pencil />
                    </Button.Icon>
                    <Button.Label>Edit Repo</Button.Label>
                </Button.Root>
            </Dialog.Trigger>
            <Dialog.Portal>
                <Dialog.Overlay className="z-40" />
                <Dialog.Content mixed className="z-50 max-w-lg">
                    <Dialog.Title>Edit Repository</Dialog.Title>
                    <Dialog.Description className="mt-1" size="sm">
                        Edit repository details
                    </Dialog.Description>

                    <Separator dashed className="my-6" />

                    <form>
                        <div className="space-y-6" data-rounded="large">
                            <div className="w-full space-y-2.5">
                                <Label size="md" htmlFor="website">
                                    Website *
                                </Label>
                                <Input name="website" id="website" type="url" required defaultValue="https://tailus.io" className="rounded-[--btn-radius] dark:bg-[--ui-bg]" />
                                <Caption as="p">Description</Caption>
                            </div>
                            <div className="w-full space-y-2.5">
                                <Label size="md" htmlFor="description2">
                                    Description
                                </Label>
                                <Textarea name="description2" id="description2" required rows={3} placeholder="Add your project description" defaultValue="Highly customizable components for crafting modern, personalized websites and applications." className="rounded-[--card-radius] dark:bg-[--ui-bg]" />
                            </div>
                            <div className="space-y-3">
                                <Aligner>
                                    <Checkbox.Root defaultChecked id="releases">
                                        <Checkbox.Indicator>
                                            <Check className="size-3.5" strokeWidth={3} />
                                        </Checkbox.Indicator>
                                    </Checkbox.Root>
                                    <Label htmlFor="releases">Releases</Label>
                                </Aligner>
                                <Aligner>
                                    <Checkbox.Root id="packages">
                                        <Checkbox.Indicator>
                                            <Check className="size-3.5" strokeWidth={3} />
                                        </Checkbox.Indicator>
                                    </Checkbox.Root>
                                    <Label htmlFor="packages">Packages</Label>
                                </Aligner>
                                <Aligner>
                                    <Checkbox.Root defaultChecked id="env">
                                        <Checkbox.Indicator>
                                            <Check className="size-3.5" strokeWidth={3} />
                                        </Checkbox.Indicator>
                                    </Checkbox.Root>
                                    <Label htmlFor="env">Environments</Label>
                                </Aligner>
                            </div>
                        </div>
                    </form>
                    <Dialog.Actions className="-mx-[--card-padding] border-t px-[--card-padding] pt-[--card-padding]">
                        <Dialog.Close asChild>
                            <Button.Root variant="outlined" intent="gray" size="sm">
                                <Button.Label>Cancel</Button.Label>
                            </Button.Root>
                        </Dialog.Close>
                        <Button.Root variant="solid" intent="primary" size="sm">
                            <Button.Label>Save Changes</Button.Label>
                        </Button.Root>
                    </Dialog.Actions>
                </Dialog.Content>
            </Dialog.Portal>
        </Dialog.Root>
    );
};

Edit Profile

import Avatar from '@tailus-ui/Avatar';
import { Caption } from '@components/typography';
import Button from '@tailus-ui/Button';
import { Camera, Pencil } from 'lucide-react';
import { useState } from 'react';
import { button } from '@tailus/themer';
import Select from '@tailus-ui/Select';
import Label from '@tailus-ui/Label';
import Dialog from '@tailus-ui/Dialog';
import Input from '@tailus-ui/Input';

const countries = [
    { flag: 'πŸ‡¨πŸ‡©', name: 'DR Congo' },
    { flag: 'πŸ‡¨πŸ‡¬', name: 'Congo Braza' },
    { flag: 'πŸ‡¦πŸ‡΄', name: 'Angola' },
    { flag: 'πŸ‡«πŸ‡·', name: 'France' },
    { flag: 'πŸ‡¬πŸ‡§', name: 'United Kingdom' },
    { flag: 'πŸ‡ͺπŸ‡Έ', name: 'Spain' }
];

type Entry = {
    flag: string;
    name: string;
};

const SelectItem = ({ entry }: { entry: Entry }) => {
    return (
        <Select.Item value={entry.name} className="items-center pl-7">
            <Select.ItemIndicator />
            <Select.ItemText>
                <span role="img" aria-label={entry.name} className="mr-2">
                    {entry.flag}
                </span>
                {entry.name}
            </Select.ItemText>
        </Select.Item>
    );
};
export const ProfileEdit = () => {
    const [imageSrc, setImageSrc] = useState('https://pbs.twimg.com/profile_images/1767582956082561024/TLJvxR_V_400x400.jpg');

    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length > 0) {
            const file = e.target.files[0];
            const url = URL.createObjectURL(file);
            setImageSrc(url);
        } else {
            console.error('No file selected');
        }
    };
    return (
        <Dialog.Root>
            <Dialog.Trigger asChild>
                <Button.Root size="sm">
                    <Button.Icon size="xs">
                        <Pencil />
                    </Button.Icon>
                    <Button.Label>Edit Profile</Button.Label>
                </Button.Root>
            </Dialog.Trigger>

            <Dialog.Portal>
                <Dialog.Overlay className="z-40" />
                <Dialog.Content mixed className="z-50 max-w-xl">
                    <Dialog.Title>Account info</Dialog.Title>
                    <Dialog.Description className="mt-1" size="sm">
                        View and update your account details
                    </Dialog.Description>

                    <div className="relative my-8 size-fit">
                        <div className="absolute bottom-0 right-0 z-[1] size-fit">
                            <label htmlFor="avatar-input" className={button.outlined({ size: 'sm', intent: 'gray', class: 'size-7 rounded-full p-0 dark:bg-gray-700/75 dark:backdrop-blur' })}>
                                <input hidden type="file" accept="image/png, image/jpeg, image/jpg, image/webp" onChange={handleImageChange} id="avatar-input" name="avatar-input" />
                                <Camera className="size-4" />
                            </label>
                        </div>

                        <Avatar.Root size="3xl">
                            <Avatar.Image src={imageSrc} width={256} height={256} loading="lazy" className="object-cover" />
                            <Avatar.Fallback children="MI" />
                        </Avatar.Root>
                    </div>

                    <form>
                        <div className="grid gap-6 sm:grid-cols-2">
                            <div className="space-y-2.5">
                                <Label size="md" htmlFor="name">
                                    Name
                                </Label>
                                <Input type="text" id="name" defaultValue="MΓ©schac Irung" />
                            </div>
                            <div className="space-y-2.5">
                                <Label size="md" htmlFor="email">
                                    Email
                                </Label>
                                <Input type="email" id="email" defaultValue="m.irung@tailus.io" />
                            </div>

                            <div className="space-y-2.5">
                                <Label size="md" htmlFor="role">
                                    Role
                                </Label>
                                <Input type="text" id="role" defaultValue="Frontend Developer" />
                            </div>

                            <div className="space-y-2.5">
                                <Label size="md">Country</Label>
                                <Select.Root defaultValue="DR Congo">
                                    <Select.Trigger className="rounded-[--btn-radius]">
                                        <Select.Value placeholder="Country" />
                                        <Select.Icon />
                                    </Select.Trigger>

                                    <Select.Portal>
                                        <Select.Content mixed className="z-50 ">
                                            <Select.Viewport>
                                                {countries.map((country) => (
                                                    <SelectItem entry={country} key={country.name} />
                                                ))}
                                            </Select.Viewport>
                                        </Select.Content>
                                    </Select.Portal>
                                </Select.Root>

                                <Caption>Pick your home country</Caption>
                            </div>
                        </div>
                    </form>

                    <Dialog.Actions className="-mx-[--card-padding] border-t px-[--card-padding] pt-[--card-padding]">
                        <Dialog.Close asChild>
                            <Button.Root variant="outlined" intent="gray" size="sm">
                                <Button.Label>Cancel</Button.Label>
                            </Button.Root>
                        </Dialog.Close>
                        <Button.Root variant="solid" intent="primary" size="sm">
                            <Button.Label>Save Changes</Button.Label>
                        </Button.Root>
                    </Dialog.Actions>
                </Dialog.Content>
            </Dialog.Portal>
        </Dialog.Root>
    );
};

New Task

import Button from '@tailus-ui/Button';
import Select from '@tailus-ui/select/Select';
import Popover from '@tailus-ui/Popover';
import { Calendar } from '@tailus-ui/Calendar';
import { useState } from 'react';
import { format } from 'date-fns';
import { Bold, CalendarDays, Check, Heading, Heading1, Heading2, Heading3, Italic, List, ListChecks, ListOrdered, Pilcrow, Plus, Strikethrough, Underline, User } from 'lucide-react';
import Avatar from '@tailus-ui/Avatar';
import ToggleGroup from '@tailus-ui/ToggleGroup';
import { BERNARD_AVATAR, GLODIE_AVATAR, MESCHAC_AVATAR, THEO_AVATAR } from 'src/const';
import Dialog from '@tailus-ui/Dialog';
import Input from '@tailus-ui/Input';
import Label from '@tailus-ui/Label';
import { Caption } from '@tailus-ui/typography';
import Textarea from '@tailus-ui/Textarea';

type Member = {
    avatar: string;
    name: string;
};

const members: Member[] = [
    {
        avatar: MESCHAC_AVATAR,
        name: 'MΓ©schac Irung'
    },
    {
        avatar: GLODIE_AVATAR,
        name: 'Glodie Lukose'
    },
    {
        avatar: THEO_AVATAR,
        name: 'ThΓ©o Balick'
    },
    {
        avatar: BERNARD_AVATAR,
        name: 'Bernard Ng'
    }
];

export const NewTask = () => {
    const [selected, setSelected] = useState<Date>();
    return (
        <Dialog.Root>
            <Dialog.Trigger asChild>
                <Button.Root size="sm">
                    <Button.Icon>
                        <Plus />
                    </Button.Icon>
                    <Button.Label>New</Button.Label>
                </Button.Root>
            </Dialog.Trigger>
            <Dialog.Portal>
                <Dialog.Overlay className="z-40" />
                <Dialog.Content mixed className="z-50 max-w-lg">
                    <div className="space-y-6">
                        <div className="-mt-2 space-y-6">
                            <div className="space-y-2.5">
                                <Label className="sr-only">Task title</Label>
                                <Input type="text" required variant="plain" size="sm" placeholder="Task Title..." className="text-xl" />
                            </div>
                            <div className="flex flex-wrap gap-3 gap-y-6">
                                <Select.Root>
                                    <Select.Trigger className="w-fit rounded-[--btn-radius]" variant="mixed" size="md">
                                        <Select.Icon size="md">
                                            <User />
                                        </Select.Icon>
                                        <Select.Value placeholder="Assign" />
                                    </Select.Trigger>

                                    <Select.Portal>
                                        <Select.Content mixed position="popper" sideOffset={5} variant="soft" intent="gray" className="z-50">
                                            <Select.Viewport>
                                                {members.map((member, index) => (
                                                    <Select.Item className="flex h-fit py-1.5" key={index} value={member.name}>
                                                        <Select.ItemIndicator className="mr-2">
                                                            <Check className="size-3" />
                                                        </Select.ItemIndicator>

                                                        <Avatar.Root size="xxs">
                                                            <Avatar.Image src={member.avatar} />
                                                        </Avatar.Root>

                                                        <Select.ItemText className="flex">{member.name}</Select.ItemText>
                                                    </Select.Item>
                                                ))}
                                            </Select.Viewport>
                                        </Select.Content>
                                    </Select.Portal>
                                </Select.Root>
                                <div className="w-fit">
                                    <Label className="sr-only" htmlFor="date">
                                        Due date
                                    </Label>
                                    <div className="relative">
                                        <Input type="text" id="date" defaultValue={selected && format(selected, 'PPP')} placeholder="Due date" className="rounded-[--btn-radius] dark:bg-[--ui-bg]" />
                                        <div className="absolute inset-y-0.5 right-0.5">
                                            <Popover.Root>
                                                <Popover.Trigger asChild>
                                                    <Button.Root className="rounded-[calc(var(--btn-radius)-2px)]" variant="ghost" intent="gray" size="sm">
                                                        <Button.Icon type="only" size="sm">
                                                            <CalendarDays />
                                                        </Button.Icon>
                                                    </Button.Root>
                                                </Popover.Trigger>
                                                <Popover.Portal>
                                                    <Popover.Content sideOffset={5} mixed className="z-50 max-w-fit">
                                                        <Calendar initialFocus mode="single" defaultMonth={selected} selected={selected} onSelect={(day: Date) => setSelected(day)} intent="primary" />
                                                    </Popover.Content>
                                                </Popover.Portal>
                                            </Popover.Root>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="relative">
                            <div className="absolute left-1.5 top-10 z-[1] flex gap-px" data-rounded="default">
                                <Popover.Root>
                                    <Popover.Trigger asChild>
                                        <Button.Root size="xs" variant="ghost" intent="gray">
                                            <Button.Icon type="only" size="xs">
                                                <Bold />
                                            </Button.Icon>
                                        </Button.Root>
                                    </Popover.Trigger>
                                    <Popover.Portal>
                                        <Popover.Content align="start" className="z-50 p-1" mixed>
                                            <ToggleGroup.Root type="multiple" aria-label="text formatting options" variant="soft">
                                                <ToggleGroup.Item value="bold" size="xs">
                                                    <ToggleGroup.Icon>
                                                        <Bold />
                                                    </ToggleGroup.Icon>
                                                </ToggleGroup.Item>
                                                <ToggleGroup.Item value="italic" size="xs">
                                                    <ToggleGroup.Icon>
                                                        <Italic />
                                                    </ToggleGroup.Icon>
                                                </ToggleGroup.Item>
                                                <ToggleGroup.Item value="underline" size="xs">
                                                    <ToggleGroup.Icon>
                                                        <Underline />
                                                    </ToggleGroup.Icon>
                                                </ToggleGroup.Item>
                                                <ToggleGroup.Item value="strikethrough" size="xs">
                                                    <ToggleGroup.Icon>
                                                        <Strikethrough />
                                                    </ToggleGroup.Icon>
                                                </ToggleGroup.Item>
                                            </ToggleGroup.Root>
                                        </Popover.Content>
                                    </Popover.Portal>
                                </Popover.Root>
                                <Popover.Root>
                                    <Popover.Trigger asChild>
                                        <Button.Root size="xs" variant="ghost" intent="gray">
                                            <Button.Icon type="only" size="xs">
                                                <Heading />
                                            </Button.Icon>
                                        </Button.Root>
                                    </Popover.Trigger>
                                    <Popover.Portal>
                                        <Popover.Content align="start" className="z-50 p-1" mixed>
                                            <ToggleGroup.Root type="single" aria-label="text formatting options" variant="soft">
                                                <ToggleGroup.Item value="h1" size="xs">
                                                    <ToggleGroup.Icon>
                                                        <Heading1 />
                                                    </ToggleGroup.Icon>
                                                </ToggleGroup.Item>
                                                <ToggleGroup.Item value="h2" size="xs">
                                                    <ToggleGroup.Icon>
                                                        <Heading2 />
                                                    </ToggleGroup.Icon>
                                                </ToggleGroup.Item>
                                                <ToggleGroup.Item value="h3" size="xs">
                                                    <ToggleGroup.Icon>
                                                        <Heading3 />
                                                    </ToggleGroup.Icon>
                                                </ToggleGroup.Item>
                                                <ToggleGroup.Item value="body" size="xs">
                                                    <ToggleGroup.Icon>
                                                        <Pilcrow />
                                                    </ToggleGroup.Icon>
                                                </ToggleGroup.Item>
                                                <ToggleGroup.Item value="list" size="xs">
                                                    <ToggleGroup.Icon>
                                                        <List />
                                                    </ToggleGroup.Icon>
                                                </ToggleGroup.Item>
                                                <ToggleGroup.Item value="list" size="xs">
                                                    <ToggleGroup.Icon>
                                                        <ListOrdered />
                                                    </ToggleGroup.Icon>
                                                </ToggleGroup.Item>
                                            </ToggleGroup.Root>
                                        </Popover.Content>
                                    </Popover.Portal>
                                </Popover.Root>
                                <Button.Root size="xs" variant="ghost" intent="gray">
                                    <Button.Icon type="only" size="xs">
                                        <ListChecks />
                                    </Button.Icon>
                                </Button.Root>
                            </div>
                            <div className="space-y-2.5">
                                <Label size="md" htmlFor="dsc">
                                    Description
                                </Label>
                                <Textarea required rows={6} id="dsc" className="pt-10" placeholder="Add your project description" />
                                <Caption>Markdown is supported</Caption>
                            </div>
                        </div>
                    </div>
                    <Dialog.Actions>
                        <Dialog.Close asChild>
                            <Button.Root variant="outlined" intent="gray" size="sm">
                                <Button.Label>Cancel</Button.Label>
                            </Button.Root>
                        </Dialog.Close>
                        <Button.Root variant="solid" intent="primary" size="sm">
                            <Button.Label>Next</Button.Label>
                        </Button.Root>
                    </Dialog.Actions>
                </Dialog.Content>
            </Dialog.Portal>
        </Dialog.Root>
    );
};