export const title = "Modal components"
export const description = "Powerful and customizable React modal components built for modern applications and websites. These modals are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/application/modals/modal.tsx",
    rac: "https://react-spectrum.adobe.com/react-aria/Modal.html"
}

import * as Demos from "@/components/application/modals/modals.story.tsx";

<PreviewAndCode title="Modal example" isPublic={false} iframeSrc="/react/iframe/modals/ai-assistant-modal" cliCommand="npx untitledui@latest add modals/ai-assistant">
    <ResizablePreview enable id="preview" className="h-[840px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/ai-assistant-modal" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/AIAssistantModal" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this modal component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui add modal
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/modal" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the calendar components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Modals examples

Below are examples and variations of this modals component:

### Stacked left aligned {{ tocOnly:true }}

<PreviewAndCode title="Stacked left aligned" isPublic={false} iframeSrc="/react/iframe/modals/stacked-left-aligned-modal" cliCommand="npx untitledui@latest add modals/stacked-left-aligned" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/stacked-left-aligned-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/StackedLeftAlignedModal" />
    </TabPanel>
</PreviewAndCode>

### Warning stacked left aligned {{ tocOnly:true }}

<PreviewAndCode title="Warning stacked left aligned" isPublic={false} iframeSrc="/react/iframe/modals/warning-stacked-left-aligned-modal" cliCommand="npx untitledui@latest add modals/warning-stacked-left-aligned" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/warning-stacked-left-aligned-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/WarningStackedLeftAlignedModal" />
    </TabPanel>
</PreviewAndCode>

### Destructive stacked left aligned {{ tocOnly:true }}

<PreviewAndCode title="Destructive stacked left aligned" isPublic={false} iframeSrc="/react/iframe/modals/destructive-stacked-left-aligned-modal" cliCommand="npx untitledui@latest add modals/destructive-stacked-left-aligned" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/destructive-stacked-left-aligned-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/DestructiveStackedLeftAlignedModal" />
    </TabPanel>
</PreviewAndCode>

### Horizontal {{ tocOnly:true }}

<PreviewAndCode title="Horizontal" isPublic={false} iframeSrc="/react/iframe/modals/horizontal-modal" cliCommand="npx untitledui@latest add modals/horizontal" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/horizontal-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/HorizontalModal" />
    </TabPanel>
</PreviewAndCode>

### Warning horizontal {{ tocOnly:true }}

<PreviewAndCode title="Warning horizontal" isPublic={false} iframeSrc="/react/iframe/modals/warning-horizontal-modal" cliCommand="npx untitledui@latest add modals/warning-horizontal" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/warning-horizontal-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/WarningHorizontalModal" />
    </TabPanel>
</PreviewAndCode>

### Destructive horizontal {{ tocOnly:true }}

<PreviewAndCode title="Destructive horizontal" isPublic={false} iframeSrc="/react/iframe/modals/destructive-horizontal-modal" cliCommand="npx untitledui@latest add modals/destructive-horizontal" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/destructive-horizontal-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/DestructiveHorizontalModal" />
    </TabPanel>
</PreviewAndCode>

### Login {{ tocOnly:true }}

<PreviewAndCode title="Login" isPublic={false} iframeSrc="/react/iframe/modals/login-modal" cliCommand="npx untitledui@latest add modals/login" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[720px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/login-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/LoginModal" />
    </TabPanel>
</PreviewAndCode>

### Signup 01 {{ tocOnly:true }}

<PreviewAndCode title="Signup 01" isPublic={false} iframeSrc="/react/iframe/modals/signup-01-modal" cliCommand="npx untitledui@latest add modals/signup-01" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[880px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/signup-01-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/Signup01Modal" />
    </TabPanel>
</PreviewAndCode>

### Signup 02 {{ tocOnly:true }}

<PreviewAndCode title="Signup 02" isPublic={false} iframeSrc="/react/iframe/modals/signup-02-modal" cliCommand="npx untitledui@latest add modals/signup-02" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[880px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/signup-02-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/Signup02Modal" />
    </TabPanel>
</PreviewAndCode>

### Checkboxes {{ tocOnly:true }}

<PreviewAndCode title="Checkboxes" isPublic={false} iframeSrc="/react/iframe/modals/checkboxes-modal" cliCommand="npx untitledui@latest add modals/checkboxes" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/checkboxes-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/CheckboxesModal" />
    </TabPanel>
</PreviewAndCode>

### Toggles {{ tocOnly:true }}

<PreviewAndCode title="Toggles" isPublic={false} iframeSrc="/react/iframe/modals/toggles-modal" cliCommand="npx untitledui@latest add modals/toggles" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/toggles-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/TogglesModal" />
    </TabPanel>
</PreviewAndCode>

### Link field {{ tocOnly:true }}

<PreviewAndCode title="Link field" isPublic={false} iframeSrc="/react/iframe/modals/link-field-modal" cliCommand="npx untitledui@latest add modals/link-field" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/link-field-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/LinkFieldModal" />
    </TabPanel>
</PreviewAndCode>

### Dropdown {{ tocOnly:true }}

<PreviewAndCode title="Dropdown" isPublic={false} iframeSrc="/react/iframe/modals/dropdown-modal" cliCommand="npx untitledui@latest add modals/dropdown" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/dropdown-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/DropdownModal" />
    </TabPanel>
</PreviewAndCode>

### Input field {{ tocOnly:true }}

<PreviewAndCode title="Input field" isPublic={false} iframeSrc="/react/iframe/modals/input-field-modal" cliCommand="npx untitledui@latest add modals/input-field" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/input-field-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/InputFieldModal" />
    </TabPanel>
</PreviewAndCode>

### Labels {{ tocOnly:true }}

<PreviewAndCode title="Labels" isPublic={false} iframeSrc="/react/iframe/modals/labels-modal" cliCommand="npx untitledui@latest add modals/labels" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/labels-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/LabelsModal" />
    </TabPanel>
</PreviewAndCode>

### Access request {{ tocOnly:true }}

<PreviewAndCode title="Access request" isPublic={false} iframeSrc="/react/iframe/modals/access-request-modal" cliCommand="npx untitledui@latest add modals/access-request" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/access-request-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/AccessRequestModal" />
    </TabPanel>
</PreviewAndCode>

### Email invite {{ tocOnly:true }}

<PreviewAndCode title="Email invite" isPublic={false} iframeSrc="/react/iframe/modals/email-invite-modal" cliCommand="npx untitledui@latest add modals/email-invite" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/email-invite-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/EmailInviteModal" />
    </TabPanel>
</PreviewAndCode>

### User invite {{ tocOnly:true }}

<PreviewAndCode title="User invite" isPublic={false} iframeSrc="/react/iframe/modals/user-invite-modal" cliCommand="npx untitledui@latest add modals/user-invite" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[720px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/user-invite-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/UserInviteModal" />
    </TabPanel>
</PreviewAndCode>

### Stacked with team {{ tocOnly:true }}

<PreviewAndCode title="Stacked with team" isPublic={false} iframeSrc="/react/iframe/modals/stacked-with-team-modal" cliCommand="npx untitledui@latest add modals/stacked-with-team" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/stacked-with-team-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/StackedWithTeamModal" />
    </TabPanel>
</PreviewAndCode>

### Stacked with team and link {{ tocOnly:true }}

<PreviewAndCode title="Stacked with team and link" isPublic={false} iframeSrc="/react/iframe/modals/stacked-with-team-and-link-modal" cliCommand="npx untitledui@latest add modals/stacked-with-team-and-link" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/stacked-with-team-and-link-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/StackedWithTeamAndLinkModal" />
    </TabPanel>
</PreviewAndCode>

### Stacked with team and invites {{ tocOnly:true }}

<PreviewAndCode title="Stacked with team and invites" isPublic={false} iframeSrc="/react/iframe/modals/stacked-with-team-and-invites-modal" cliCommand="npx untitledui@latest add modals/stacked-with-team-and-invites" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[720px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/stacked-with-team-and-invites-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/StackedWithTeamAndInvitesModal" />
    </TabPanel>
</PreviewAndCode>

### Verification code {{ tocOnly:true }}

<PreviewAndCode title="Verification code" isPublic={false} iframeSrc="/react/iframe/modals/verification-code-modal" cliCommand="npx untitledui@latest add modals/verification-code" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/verification-code-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/VerificationCodeModal" />
    </TabPanel>
</PreviewAndCode>

### Two-factor code {{ tocOnly:true }}

<PreviewAndCode title="Two-factor code" isPublic={false} iframeSrc="/react/iframe/modals/twofa-code-modal" cliCommand="npx untitledui@latest add modals/twofa-code" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[780px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/twofa-code-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/TWOFACodeModal" />
    </TabPanel>
</PreviewAndCode>

### Password prompt {{ tocOnly:true }}

<PreviewAndCode title="Password prompt" isPublic={false} iframeSrc="/react/iframe/modals/password-prompt-modal" cliCommand="npx untitledui@latest add modals/password-prompt" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/password-prompt-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/PasswordPromptModal" />
    </TabPanel>
</PreviewAndCode>

### Centered photo {{ tocOnly:true }}

<PreviewAndCode title="Centered photo" isPublic={false} iframeSrc="/react/iframe/modals/centered-photo-modal" cliCommand="npx untitledui@latest add modals/centered-photo" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/centered-photo-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/CenteredPhotoModal" />
    </TabPanel>
</PreviewAndCode>

### Centered photo carousel {{ tocOnly:true }}

<PreviewAndCode title="Centered photo carousel" isPublic={false} iframeSrc="/react/iframe/modals/centered-photo-carousel-modal" cliCommand="npx untitledui@latest add modals/centered-photo-carousel" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/centered-photo-carousel-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/CenteredPhotoCarouselModal" />
    </TabPanel>
</PreviewAndCode>

### Centered video carousel {{ tocOnly:true }}

<PreviewAndCode title="Centered video carousel" isPublic={false} iframeSrc="/react/iframe/modals/centered-video-carousel-modal" cliCommand="npx untitledui@latest add modals/centered-video-carousel" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[720px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/centered-video-carousel-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/CenteredVideoCarouselModal" />
    </TabPanel>
</PreviewAndCode>

### Payment details {{ tocOnly:true }}

<PreviewAndCode title="Payment details" isPublic={false} iframeSrc="/react/iframe/modals/payment-details-modal" cliCommand="npx untitledui@latest add modals/payment-details" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/payment-details-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/PaymentDetailsModal" />
    </TabPanel>
</PreviewAndCode>

### Payment details with image {{ tocOnly:true }}

<PreviewAndCode title="Payment details with image" isPublic={false} iframeSrc="/react/iframe/modals/payment-details-with-image-modal" cliCommand="npx untitledui@latest add modals/payment-details-with-image" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[800px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/payment-details-with-image-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/PaymentDetailsWithImageModal" />
    </TabPanel>
</PreviewAndCode>

### Plan 01 {{ tocOnly:true }}

<PreviewAndCode title="Plan 01" isPublic={false} iframeSrc="/react/iframe/modals/plan-01-modal" cliCommand="npx untitledui@latest add modals/plan-01" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[680px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/plan-01-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/Plan01Modal" />
    </TabPanel>
</PreviewAndCode>

### Plan 02 {{ tocOnly:true }}

<PreviewAndCode title="Plan 02" isPublic={false} iframeSrc="/react/iframe/modals/plan-02-modal" cliCommand="npx untitledui@latest add modals/plan-02" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[720px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/plan-02-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/Plan02Modal" />
    </TabPanel>
</PreviewAndCode>

### Payment method {{ tocOnly:true }}

<PreviewAndCode title="Payment method" isPublic={false} iframeSrc="/react/iframe/modals/payment-method-modal" cliCommand="npx untitledui@latest add modals/payment-method" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[720px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/payment-method-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/PaymentMethodModal" />
    </TabPanel>
</PreviewAndCode>

### Date Picker {{ tocOnly:true }}

<PreviewAndCode title="Date picker" isPublic={false} iframeSrc="/react/iframe/modals/date-picker-modal" cliCommand="npx untitledui@latest add modals/date-picker" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/date-picker-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/DatePickerModal" />
    </TabPanel>
</PreviewAndCode>

### File upload {{ tocOnly:true }}

<PreviewAndCode title="File upload" isPublic={false} iframeSrc="/react/iframe/modals/file-upload-modal" cliCommand="npx untitledui@latest add modals/file-upload" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[720px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/file-upload-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/FileUploadModal" />
    </TabPanel>
</PreviewAndCode>

### Profile settings {{ tocOnly:true }}

<PreviewAndCode title="Profile settings" isPublic={false} iframeSrc="/react/iframe/modals/profile-settings-modal" cliCommand="npx untitledui@latest add modals/profile-settings" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[820px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/profile-settings-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/ProfileSettingsModal" />
    </TabPanel>
</PreviewAndCode>

### User selection {{ tocOnly:true }}

<PreviewAndCode title="User selection" isPublic={false} iframeSrc="/react/iframe/modals/user-selection-modal" cliCommand="npx untitledui@latest add modals/user-selection" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[600px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/user-selection-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/UserSelectionModal" />
    </TabPanel>
</PreviewAndCode>

### Form 01 {{ tocOnly:true }}

<PreviewAndCode title="Form 01" isPublic={false} iframeSrc="/react/iframe/modals/form-01-modal" cliCommand="npx untitledui@latest add modals/form-01" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[920px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/form-01-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/Form01Modal" />
    </TabPanel>
</PreviewAndCode>

### Form 02 {{ tocOnly:true }}

<PreviewAndCode title="Form 02" isPublic={false} iframeSrc="/react/iframe/modals/form-02-modal" cliCommand="npx untitledui@latest add modals/form-02" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[920px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/form-02-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/Form02Modal" />
    </TabPanel>
</PreviewAndCode>

### Image crop {{ tocOnly:true }}

<PreviewAndCode title="Image crop" isPublic={false} iframeSrc="/react/iframe/modals/image-crop-modal" cliCommand="npx untitledui@latest add modals/image-crop" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[840px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/image-crop-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/ImageCropModal" />
    </TabPanel>
</PreviewAndCode>

### Calendar event {{ tocOnly:true }}

<PreviewAndCode title="Calendar event" isPublic={false} iframeSrc="/react/iframe/modals/calendar-event-modal" cliCommand="npx untitledui@latest add modals/calendar-event" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[840px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/calendar-event-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/CalendarEventModal" />
    </TabPanel>
</PreviewAndCode>

### Banner appearance {{ tocOnly:true }}

<PreviewAndCode title="Banner appearance" isPublic={false} iframeSrc="/react/iframe/modals/banner-appearance-modal" cliCommand="npx untitledui@latest add modals/banner-appearance" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[800px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/banner-appearance-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/BannerAppearanceModal" />
    </TabPanel>
</PreviewAndCode>

### Appearance settings {{ tocOnly:true }}

<PreviewAndCode title="Appearance settings" isPublic={false} iframeSrc="/react/iframe/modals/appearance-settings-modal" cliCommand="npx untitledui@latest add modals/appearance-settings" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[840px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/appearance-settings-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/AppearanceSettingsModal" />
    </TabPanel>
</PreviewAndCode>

### AI assistant {{ tocOnly:true }}

<PreviewAndCode title="AI assistant" isPublic={false} iframeSrc="/react/iframe/modals/ai-assistant-modal" cliCommand="npx untitledui@latest add modals/ai-assistant" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[840px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/ai-assistant-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/AIAssistantModal" />
    </TabPanel>
</PreviewAndCode>

### User settings {{ tocOnly:true }}

<PreviewAndCode title="User settings" isPublic={false} iframeSrc="/react/iframe/modals/user-settings-modal" cliCommand="npx untitledui@latest add modals/user-settings" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[960px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/user-settings-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/UserSettingsModal" />
    </TabPanel>
</PreviewAndCode>

### New project {{ tocOnly:true }}

<PreviewAndCode title="New project" isPublic={false} iframeSrc="/react/iframe/modals/new-project-modal" cliCommand="npx untitledui@latest add modals/new-project" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[840px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/new-project-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/NewProjectModal" />
    </TabPanel>
</PreviewAndCode>

### Text editor {{ tocOnly:true }}

<PreviewAndCode title="Text editor" isPublic={false} iframeSrc="/react/iframe/modals/text-editor-modal" cliCommand="npx untitledui@latest add modals/text-editor-modal" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[920px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/text-editor-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/TextEditorModal" />
    </TabPanel>
</PreviewAndCode>

### Share project {{ tocOnly:true }}

<PreviewAndCode title="Share project" isPublic={false} iframeSrc="/react/iframe/modals/share-project-modal" cliCommand="npx untitledui@latest add modals/share-project" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[720px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/share-project-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/ShareProjectModal" />
    </TabPanel>
</PreviewAndCode>

### Create event {{ tocOnly:true }}

<PreviewAndCode title="Create event" isPublic={false} iframeSrc="/react/iframe/modals/create-event-modal" cliCommand="npx untitledui@latest add modals/create-event" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[840px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/create-event-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/CreateEventModal" />
    </TabPanel>
</PreviewAndCode>

### Integration {{ tocOnly:true }}

<PreviewAndCode title="Integration" isPublic={false} iframeSrc="/react/iframe/modals/integration-modal" cliCommand="npx untitledui@latest add modals/integration" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[720px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/integration-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/IntegrationModal" />
    </TabPanel>
</PreviewAndCode>

### New message empty state {{ tocOnly:true }}

<PreviewAndCode title="New message empty state" isPublic={false} iframeSrc="/react/iframe/modals/new-message-empty-modal" cliCommand="npx untitledui@latest add modals/new-message-empty-state" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[720px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/new-message-empty-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/NewMessageEmptyModal" />
    </TabPanel>
</PreviewAndCode>

### New message filled {{ tocOnly:true }}

<PreviewAndCode title="New message filled" isPublic={false} iframeSrc="/react/iframe/modals/new-message-filled-modal" cliCommand="npx untitledui@latest add modals/new-message-filled" dynamicHeight={false}>
    <ResizablePreview enable id="preview" className="h-[720px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/modals/new-message-filled-modal" dynamicHeight={false} height="100%" loading="lazy" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="modals/NewMessageFilledModal" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "How do I control modal visibility?",
            answer: "You can control modal visibility using the `isOpen` and `onOpenChange` props on the `DialogTrigger` component. This allows you to programmatically open and close modals, and respond to user interactions that change the modal state.",
        },
        {
            question: "How do I prevent users from closing a modal?",
            answer: "You can prevent users from closing a modal by setting the `isDismissable` prop to `false` on the `ModalOverlay` component. This will disable the close button, prevent closing when clicking outside the modal, and disable the Escape key for closing.",
        },
        {
            question: "What components make up a modal?",
            answer: "A complete modal consists of: `DialogTrigger` (manages open state), `ModalOverlay` (backdrop and positioning), `Modal` (container with animations), and `Dialog` (content wrapper). You can also use `CloseButton` for manual close functionality.",
        },
        {
            question: "How do I customize modal animations?",
            answer: "Modal animations are built-in and use CSS classes for enter/exit transitions. The `ModalOverlay` handles fade-in/out effects, while the `Modal` component handles zoom-in/out animations. You can customize these by overriding the animation classes.",
        },
        {
            question: "Are modals accessible?",
            answer: "Yes, the modal component is built with accessibility in mind using React Aria. It automatically manages focus trapping, supports keyboard navigation (Escape to close), provides proper ARIA attributes, and ensures screen readers announce the modal appropriately.",
        }
    ]}
/>