export const title = "Alert components"
export const description = "Powerful and customizable React alert components built for modern applications and websites. These alert components are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/alerts/alerts.demo.tsx";

<PreviewAndCode title="Alert example" isPublic={false} iframeSrc="/react/iframe/alerts/alert-floating-gray-demo">
    <ResizablePreview enable id="preview" className="h-[280px]">
        <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/alerts/alert-floating-gray-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFloatingGrayDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this alerts 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@latest add alerts
        ```
    </TabPanel>

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

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

<Divider />

## Alert examples

Below are examples and variations of this alert component:

### Floating default {{ tocOnly:true }}

<PreviewAndCode title="Floating default" isPublic={false} iframeSrc="/react/iframe/alerts/alert-floating-default-demo">
    <ResizablePreview enable id="preview" className="h-[280px]">
        <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/alerts/alert-floating-default-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFloatingDefaultDemo" />
    </TabPanel>
</PreviewAndCode>

### Floating brand {{ tocOnly:true }}

<PreviewAndCode title="Floating brand" isPublic={false} iframeSrc="/react/iframe/alerts/alert-floating-brand-demo">
    <ResizablePreview enable id="preview" className="h-[280px]">
        <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/alerts/alert-floating-brand-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFloatingBrandDemo" />
    </TabPanel>
</PreviewAndCode>

### Floating gray {{ tocOnly:true }}

<PreviewAndCode title="Floating gray" isPublic={false} iframeSrc="/react/iframe/alerts/alert-floating-gray-demo">
    <ResizablePreview enable id="preview" className="h-[280px]">
        <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/alerts/alert-floating-gray-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFloatingGrayDemo" />
    </TabPanel>
</PreviewAndCode>

### Floating error {{ tocOnly:true }}

<PreviewAndCode title="Floating error" isPublic={false} iframeSrc="/react/iframe/alerts/alert-floating-error-demo">
    <ResizablePreview enable id="preview" className="h-[280px]">
        <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/alerts/alert-floating-error-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFloatingErrorDemo" />
    </TabPanel>
</PreviewAndCode>

### Floating warning {{ tocOnly:true }}

<PreviewAndCode title="Floating warning" isPublic={false} iframeSrc="/react/iframe/alerts/alert-floating-warning-demo">
    <ResizablePreview enable id="preview" className="h-[280px]">
        <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/alerts/alert-floating-warning-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFloatingWarningDemo" />
    </TabPanel>
</PreviewAndCode>

### Floating success {{ tocOnly:true }}

<PreviewAndCode title="Floating success" isPublic={false} iframeSrc="/react/iframe/alerts/alert-floating-success-demo">
    <ResizablePreview enable id="preview" className="h-[280px]">
        <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/alerts/alert-floating-success-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFloatingSuccessDemo" />
    </TabPanel>
</PreviewAndCode>

### Full-width default {{ tocOnly:true }}

<PreviewAndCode title="Full-width default" isPublic={false} iframeSrc="/react/iframe/alerts/alert-full-width-default-demo">
    <ResizablePreview enable id="preview" className="h-[240px]">
        <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/alerts/alert-full-width-default-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFullWidthDefaultDemo" />
    </TabPanel>
</PreviewAndCode>

### Full-width brand {{ tocOnly:true }}

<PreviewAndCode title="Full-width brand" isPublic={false} iframeSrc="/react/iframe/alerts/alert-full-width-brand-demo">
    <ResizablePreview enable id="preview" className="h-[240px]">
        <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/alerts/alert-full-width-brand-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFullWidthBrandDemo" />
    </TabPanel>
</PreviewAndCode>

### Full-width gray {{ tocOnly:true }}

<PreviewAndCode title="Full-width gray" isPublic={false} iframeSrc="/react/iframe/alerts/alert-full-width-gray-demo">
    <ResizablePreview enable id="preview" className="h-[240px]">
        <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/alerts/alert-full-width-gray-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFullWidthGrayDemo" />
    </TabPanel>
</PreviewAndCode>

### Full-width error {{ tocOnly:true }}

<PreviewAndCode title="Full-width error" isPublic={false} iframeSrc="/react/iframe/alerts/alert-full-width-error-demo">
    <ResizablePreview enable id="preview" className="h-[240px]">
        <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/alerts/alert-full-width-error-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFullWidthErrorDemo" />
    </TabPanel>
</PreviewAndCode>

### Full-width warning {{ tocOnly:true }}

<PreviewAndCode title="Full-width warning" isPublic={false} iframeSrc="/react/iframe/alerts/alert-full-width-warning-demo">
    <ResizablePreview enable id="preview" className="h-[240px]">
        <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/alerts/alert-full-width-warning-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFullWidthWarningDemo" />
    </TabPanel>
</PreviewAndCode>

### Full-width success {{ tocOnly:true }}

<PreviewAndCode title="Full-width success" isPublic={false} iframeSrc="/react/iframe/alerts/alert-full-width-success-demo">
    <ResizablePreview enable id="preview" className="h-[240px]">
        <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/alerts/alert-full-width-success-demo" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="alerts/AlertFullWidthSuccessDemo" />
    </TabPanel>
</PreviewAndCode>