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

import * as Demos from "@/components/application/slideout-menus/slideout-menus.story.tsx";

<PreviewAndCode title="Drawer example" isPublic={false} iframeSrc="/react/iframe/drawers/user-settings-menu" cliCommand="npx untitledui@latest add slideout-menus/user-settings-menu">
    <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/drawers/user-settings-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/UserSettingsMenu" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this drawer 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 slideout-menu
        ```
    </TabPanel>

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

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

<Divider />

## Drawers examples

Below are examples and variations of this drawers component:

### Placeholder menu {{ tocOnly:true }}

<PreviewAndCode title="Placeholder menu" isPublic={false} iframeSrc="/react/iframe/drawers/placeholder-menu" cliCommand="npx untitledui@latest add slideout-menus/placeholder-menu">
    <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/drawers/placeholder-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/PlaceholderMenu" />
    </TabPanel>
</PreviewAndCode>

### User profile menu {{ tocOnly:true }}

<PreviewAndCode title="User profile menu" isPublic={false} iframeSrc="/react/iframe/drawers/user-profile-menu" cliCommand="npx untitledui@latest add slideout-menus/user-profile-menu">
    <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/drawers/user-profile-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/UserProfileMenu" />
    </TabPanel>
</PreviewAndCode>

### Messages menu {{ tocOnly:true }}

<PreviewAndCode title="Messages menu" isPublic={false} iframeSrc="/react/iframe/drawers/messages-menu" cliCommand="npx untitledui@latest add slideout-menus/messages-menu">
    <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/drawers/messages-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/MessagesMenu" />
    </TabPanel>
</PreviewAndCode>

### Message chat menu {{ tocOnly:true }}

<PreviewAndCode title="Message chat menu" isPublic={false} iframeSrc="/react/iframe/drawers/message-chat-menu" cliCommand="npx untitledui@latest add slideout-menus/message-chat-menu">
    <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/drawers/message-chat-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/MessageChatMenu" />
    </TabPanel>
</PreviewAndCode>

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

<PreviewAndCode title="Payment method menu" isPublic={false} iframeSrc="/react/iframe/drawers/payment-method-menu" cliCommand="npx untitledui@latest add slideout-menus/payment-method-menu">
    <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/drawers/payment-method-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/PaymentMethodMenu" />
    </TabPanel>
</PreviewAndCode>

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

<PreviewAndCode title="Payment details menu" isPublic={false} iframeSrc="/react/iframe/drawers/payment-details-menu" cliCommand="npx untitledui@latest add slideout-menus/payment-details-menu">
    <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/drawers/payment-details-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/PaymentDetailsMenu" />
    </TabPanel>
</PreviewAndCode>

### Plan menu {{ tocOnly:true }}

<PreviewAndCode title="Plan menu" isPublic={false} iframeSrc="/react/iframe/drawers/plan-menu" cliCommand="npx untitledui@latest add slideout-menus/plan-menu">
    <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/drawers/plan-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/PlanMenu" />
    </TabPanel>
</PreviewAndCode>

### Team members menu {{ tocOnly:true }}

<PreviewAndCode title="Team members menu" isPublic={false} iframeSrc="/react/iframe/drawers/team-members-menu" cliCommand="npx untitledui@latest add slideout-menus/team-members-menu">
    <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/drawers/team-members-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/TeamMembersMenu" />
    </TabPanel>
</PreviewAndCode>

### Filters menu {{ tocOnly:true }}

<PreviewAndCode title="Filters menu" isPublic={false} iframeSrc="/react/iframe/drawers/filters-menu" cliCommand="npx untitledui@latest add slideout-menus/filters-menu">
    <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/drawers/filters-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/FiltersMenu" />
    </TabPanel>
</PreviewAndCode>

### Filters advanced empty state menu {{ tocOnly:true }}

<PreviewAndCode title="Filters advanced empty state menu" isPublic={false} iframeSrc="/react/iframe/drawers/filters-advanced-empty-menu" cliCommand="npx untitledui@latest add slideout-menus/filters-advanced-menu">
    <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/drawers/filters-advanced-empty-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/FiltersAdvancedEmptyMenu" />
    </TabPanel>
</PreviewAndCode>

### Filters advanced active menu {{ tocOnly:true }}

<PreviewAndCode title="Filters advanced active menu" isPublic={false} iframeSrc="/react/iframe/drawers/filters-advanced-active-menu" cliCommand="npx untitledui@latest add slideout-menus/filters-advanced-menu">
    <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/drawers/filters-advanced-active-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/FiltersAdvancedActiveMenu" />
    </TabPanel>
</PreviewAndCode>

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

<PreviewAndCode title="File upload menu" isPublic={false} iframeSrc="/react/iframe/drawers/file-upload-menu" cliCommand="npx untitledui@latest add slideout-menus/file-upload-menu">
    <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/drawers/file-upload-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/FileUploadMenu" />
    </TabPanel>
</PreviewAndCode>

### Labels menu {{ tocOnly:true }}

<PreviewAndCode title="Labels menu" isPublic={false} iframeSrc="/react/iframe/drawers/labels-menu" cliCommand="npx untitledui@latest add slideout-menus/labels-menu">
    <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/drawers/labels-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/LabelsMenu" />
    </TabPanel>
</PreviewAndCode>

### Project details menu {{ tocOnly:true }}

<PreviewAndCode title="Project details menu" isPublic={false} iframeSrc="/react/iframe/drawers/project-details-menu" cliCommand="npx untitledui@latest add slideout-menus/project-details-menu">
    <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/drawers/project-details-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/ProjectDetailsMenu" />
    </TabPanel>
</PreviewAndCode>

### Notification settings checkbox menu {{ tocOnly:true }}

<PreviewAndCode title="Notification settings checkbox menu" isPublic={false} iframeSrc="/react/iframe/drawers/notification-settings-checkbox-menu" cliCommand="npx untitledui@latest add slideout-menus/notification-settings-checkbox-menu">
    <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/drawers/notification-settings-checkbox-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/NotificationSettingsCheckboxMenu" />
    </TabPanel>
</PreviewAndCode>

### Notification settings button menu {{ tocOnly:true }}

<PreviewAndCode title="Notification settings button menu" isPublic={false} iframeSrc="/react/iframe/drawers/notification-settings-button-menu" cliCommand="npx untitledui@latest add slideout-menus/notification-settings-button-menu">
    <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/drawers/notification-settings-button-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/NotificationSettingsButtonMenu" />
    </TabPanel>
</PreviewAndCode>

### Notifications menu {{ tocOnly:true }}

<PreviewAndCode title="Notifications menu" isPublic={false} iframeSrc="/react/iframe/drawers/notifications-menu" cliCommand="npx untitledui@latest add slideout-menus/notifications-menu">
    <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/drawers/notifications-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/NotificationsMenu" />
    </TabPanel>
</PreviewAndCode>

### Order summary menu {{ tocOnly:true }}

<PreviewAndCode title="Order summary menu" isPublic={false} iframeSrc="/react/iframe/drawers/order-summary-menu" cliCommand="npx untitledui@latest add slideout-menus/order-summary-menu">
    <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/drawers/order-summary-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/OrderSummaryMenu" />
    </TabPanel>
</PreviewAndCode>

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

<PreviewAndCode title="Calendar event menu" isPublic={false} iframeSrc="/react/iframe/drawers/calendar-event-menu" cliCommand="npx untitledui@latest add slideout-menus/calendar-event-menu">
    <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/drawers/calendar-event-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/CalendarEventMenu" />
    </TabPanel>
</PreviewAndCode>

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

<PreviewAndCode title="User settings menu" isPublic={false} iframeSrc="/react/iframe/drawers/user-settings-menu" cliCommand="npx untitledui@latest add slideout-menus/user-settings-menu">
    <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/drawers/user-settings-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/UserSettingsMenu" />
    </TabPanel>
</PreviewAndCode>

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

<PreviewAndCode title="AI assistant menu" isPublic={false} iframeSrc="/react/iframe/drawers/ai-assistant-intro-menu" cliCommand="npx untitledui@latest add slideout-menus/ai-assistant-intro-menu">
    <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/drawers/ai-assistant-intro-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/AIAssistantIntroMenu" />
    </TabPanel>
</PreviewAndCode>

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

<PreviewAndCode title="AI assistant message menu" isPublic={false} iframeSrc="/react/iframe/drawers/ai-assistant-message-menu" cliCommand="npx untitledui@latest add slideout-menus/ai-assistant-message-menu">
    <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/drawers/ai-assistant-message-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/AIAssistantMessageMenu" />
    </TabPanel>
</PreviewAndCode>

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

<PreviewAndCode title="Share project menu" isPublic={false} iframeSrc="/react/iframe/drawers/share-project-menu" cliCommand="npx untitledui@latest add slideout-menus/share-project-menu">
    <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/drawers/share-project-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/ShareProjectMenu" />
    </TabPanel>
</PreviewAndCode>

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

<PreviewAndCode title="Create event menu" isPublic={false} iframeSrc="/react/iframe/drawers/create-event-menu" cliCommand="npx untitledui@latest add slideout-menus/create-event-menu">
    <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/drawers/create-event-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/CreateEventMenu" />
    </TabPanel>
</PreviewAndCode>

### Integration menu {{ tocOnly:true }}

<PreviewAndCode title="Integration menu" isPublic={false} iframeSrc="/react/iframe/drawers/integration-menu" cliCommand="npx untitledui@latest add slideout-menus/integration-menu">
    <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/drawers/integration-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/IntegrationMenu" />
    </TabPanel>
</PreviewAndCode>