Slide Over
Blank Slide Over

The "Blank Slide Over" component is a versatile tool that allows you to create customizable slide-over dialogs for various purposes on your website. It provides a clean and simple canvas for you to add your own content, making it suitable for a wide range of use cases.

Example code / preview
Show Slide Over 
            <!-- BEGIN: Slide Over Toggle -->
<div class="text-center">
    <a data-tw-merge data-tw-toggle="modal" data-tw-target="#basic-slide-over-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary">Show Slide Over</a>
</div>
<!-- END: Slide Over Toggle -->
<!-- BEGIN: Slide Over Content -->
<div data-tw-backdrop="" aria-hidden="true" tabindex="-1" id="basic-slide-over-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]">
    <div data-tw-merge class="w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-[margin-right] duration-[0.6s] -mr-[100%] group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]">
        <div data-tw-merge class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5">
            <h2 class="mr-auto text-base font-medium">
                Blank Slide Over
            </h2>
        </div>
        <div data-tw-merge class="p-5 overflow-y-auto flex-1">This is totally awesome blank slide over!</div>
    </div>
</div>
<!-- END: Slide Over Content -->

Whether you want to display additional information, gather user input, or present important updates, the "Blank Slideover" is a flexible solution that ensures your content remains accessible and engaging. Explore the possibilities and unlock new ways to interact with your audience using the "Blank Slideover" component.

Slide Over Size

The "Slideover Size" component allows you to control the dimensions of your slide-over dialogs, ensuring that they are visually appealing and perfectly tailored to your content. With multiple size options available, you can choose the one that best suits your specific use case.

Example code / preview
Show Small Slide Over Show Medium Slide Over Show Large Slide Over Show Superlarge Slide Over 
            <div class="text-center">
    <!-- BEGIN: Small Slide Over Toggle -->
    <a data-tw-merge data-tw-toggle="modal" data-tw-target="#small-slide-over-size-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 mr-1 mb-2 mr-1">Show Small Slide Over</a>
    <!-- END: Small Slide Over Toggle -->
    <!-- BEGIN: Medium Slide Over Toggle -->
    <a data-tw-merge data-tw-toggle="modal" data-tw-target="#medium-slide-over-size-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 mr-1 mb-2 mr-1">Show Medium Slide Over</a>
    <!-- END: Medium Slide Over Toggle -->
    <!-- BEGIN: Large Slide Over Toggle -->
    <a data-tw-merge data-tw-toggle="modal" data-tw-target="#large-slide-over-size-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 mr-1 mb-2 mr-1">Show Large Slide Over</a>
    <!-- END: Large Slide Over Toggle -->
    <!-- BEGIN: Super Large Slide Over Toggle -->
    <a data-tw-merge data-tw-toggle="modal" data-tw-target="#superlarge-slide-over-size-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 mr-1 mb-2 mr-1">Show Superlarge Slide Over</a>
    <!-- END: Super Large Slide Over Toggle -->
</div>
<!-- BEGIN: Small Slide Over Content -->
<div data-tw-backdrop="" aria-hidden="true" tabindex="-1" id="small-slide-over-size-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]">
    <div data-tw-merge class="w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-[margin-right] duration-[0.6s] -mr-[100%] group-[.show]:mr-0 dark:bg-darkmode-600  sm:w-[300px]">
        <div data-tw-merge class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5">
            <h2 class="mr-auto text-base font-medium">
                Small Slide Over
            </h2>
        </div>
        <div data-tw-merge class="p-5 overflow-y-auto flex-1">This is totally awesome small slide over!</div>
    </div>
</div>
<!-- END: Small Slide Over Content -->
<!-- BEGIN: Medium Slide Over Content -->
<div data-tw-backdrop="" aria-hidden="true" tabindex="-1" id="medium-slide-over-size-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]">
    <div data-tw-merge class="w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-[margin-right] duration-[0.6s] -mr-[100%] group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]">
        <div data-tw-merge class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5">
            <h2 class="mr-auto text-base font-medium">
                Medium Slide Over
            </h2>
        </div>
        <div data-tw-merge class="p-5 overflow-y-auto flex-1">This is totally awesome medium slide over!</div>
    </div>
</div>
<!-- END: Medium Slide Over Content -->
<!-- BEGIN: Large Slide Over Content -->
<div data-tw-backdrop="" aria-hidden="true" tabindex="-1" id="large-slide-over-size-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]">
    <div data-tw-merge class="w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-[margin-right] duration-[0.6s] -mr-[100%] group-[.show]:mr-0 dark:bg-darkmode-600   sm:w-[600px]">
        <div data-tw-merge class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5">
            <h2 class="mr-auto text-base font-medium">
                Large Slide Over
            </h2>
        </div>
        <div data-tw-merge class="p-5 overflow-y-auto flex-1">This is totally awesome large slide over!</div>
    </div>
</div>
<!-- END: Large Slide Over Content -->
<!-- BEGIN: Super Large Slide Over Content -->
<div data-tw-backdrop="" aria-hidden="true" tabindex="-1" id="superlarge-slide-over-size-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]">
    <div data-tw-merge class="w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-[margin-right] duration-[0.6s] -mr-[100%] group-[.show]:mr-0 dark:bg-darkmode-600    sm:w-[600px] lg:w-[900px]">
        <div data-tw-merge class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5">
            <h2 class="mr-auto text-base font-medium">
                Superlarge Slide Over
            </h2>
        </div>
        <div data-tw-merge class="p-5 overflow-y-auto flex-1">This is totally awesome superlarge slide over!</div>
    </div>
</div>
<!-- END: Super Large Slide Over Content -->

Tailor the size of your slideover to create a user-friendly and visually engaging experience. Whether you need a compact notification or a spacious form, the "Slideover Size" component gives you the flexibility to achieve your desired layout. Explore the different size options and elevate your website's user experience with the "Slideover Size" component.

Slide Over with Close Button

The "Slide Over with Close Button" component adds an extra layer of user convenience to your slide-over dialogs. This feature allows users to easily dismiss the slide-over by clicking a close button, enhancing the overall user experience.

Example code / preview
Show Slide Over 
            <!-- BEGIN: Modal Toggle -->
<div class="text-center">
    <a data-tw-merge data-tw-toggle="modal" data-tw-target="#button-slide-over-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary">Show Slide Over</a>
</div>
<!-- END: Modal Toggle -->
<!-- BEGIN: Modal Content -->
<div data-tw-backdrop="static" aria-hidden="true" tabindex="-1" id="button-slide-over-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]">
    <div data-tw-merge class="w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-[margin-right] duration-[0.6s] -mr-[100%] group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]"><a class="absolute top-0 left-0 right-auto mt-4 -ml-10 sm:-ml-12" data-tw-dismiss="modal" href="#">
            <i data-tw-merge data-lucide="x" class="stroke-[1] w-5 h-5 w-8 h-8 text-slate-400 w-8 h-8 text-slate-400"></i>
        </a>
        <div data-tw-merge class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5">
            <h2 class="mr-auto text-base font-medium">
                Slide Over With Close Button
            </h2>
        </div>
        <div data-tw-merge class="p-5 overflow-y-auto flex-1">This is totally awesome slide over with close button!</div>
    </div>
</div>
<!-- END: Modal Content -->

The "Slide Over with Close Button" component enhances user interaction by offering a clear and intuitive method for closing the slide-over. It's particularly useful for scenarios where users may want to quickly exit or minimize the dialog without navigating away from the current page.

Overlapping Slide Over

The "Overlapping Slide Over" is a versatile feature that allows you to create layered slide-over dialogs within your web application. This feature is perfect for scenarios where you need to present information or actions in a sequential manner while keeping the user focused.

Example code / preview
Show Slide Over 
            <!-- BEGIN: Slide Over Toggle -->
<div class="text-center">
    <a data-tw-merge data-tw-toggle="modal" data-tw-target="#overlapping-slide-over-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary">Show Slide Over</a>
</div>
<!-- END: Slide Over Toggle -->
<!-- BEGIN: Slide Over Content -->
<div data-tw-backdrop="" aria-hidden="true" tabindex="-1" id="overlapping-slide-over-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]">
    <div data-tw-merge class="w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-[margin-right] duration-[0.6s] -mr-[100%] group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]">
        <div data-tw-merge class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5">
            <h2 class="mr-auto text-base font-medium">
                Overlapping Slide Over
            </h2>
        </div>
        <div data-tw-merge class="p-5 overflow-y-auto flex-1 px-5 py-10">
            <div class="text-center">
                <div class="mb-5">
                    Click button bellow to show overlapping slide
                    over!
                </div>
                <!-- BEGIN: Overlapping Slide Over Toggle -->
                <a data-tw-merge data-tw-toggle="modal" data-tw-target="#next-overlapping-slide-over-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary">Show Overlapping Slide Over</a>
                <!-- END: Overlapping Slide Over Toggle -->
                <!-- BEGIN: Overlapping Slide Over Content -->
                <div data-tw-backdrop="" aria-hidden="true" tabindex="-1" id="next-overlapping-slide-over-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]">
                    <div data-tw-merge class="w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-[margin-right] duration-[0.6s] -mr-[100%] group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]">
                        <div data-tw-merge class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5">
                            <h2 class="mr-auto text-base font-medium">
                                Overlapping Slide Over
                            </h2>
                        </div>
                        <div data-tw-merge class="p-5 overflow-y-auto flex-1 text-center">This is totally awesome overlapping slide
                            over!</div>
                    </div>
                </div>
                <!-- END: Overlapping Slide Over Content -->
            </div>
        </div>
    </div>
</div>
<!-- END: Slide Over Content -->

The "Overlapping Slide Over" feature provides a user-friendly way to present information or actions progressively, ensuring that users can focus on one piece of content at a time. It's a valuable tool for creating engaging user experiences and guiding users through complex workflows. Explore the possibilities of this feature to enhance your web application's usability and interactivity.

Header & Footer Slide Over

The "Header & Footer Slide Over" component is a powerful tool to create slide-over dialogs with customized headers and footers. This feature enables you to present content to your users while maintaining a consistent user interface and providing additional functionality in the header and footer sections.

Example code / preview
Show Slide Over 
            <!-- BEGIN: Slide Over Toggle -->
<div class="text-center">
    <a data-tw-merge data-tw-toggle="modal" data-tw-target="#header-footer-slide-over-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary">Show Slide Over</a>
</div>
<!-- END: Slide Over Toggle -->
<!-- BEGIN: Slide Over Content -->
<div data-tw-backdrop="static" aria-hidden="true" tabindex="-1" id="header-footer-slide-over-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"><!-- BEGIN: Slide Over Header -->
    <div data-tw-merge class="w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-[margin-right] duration-[0.6s] -mr-[100%] group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]"><a class="absolute top-0 left-0 right-auto mt-4 -ml-10 sm:-ml-12" data-tw-dismiss="modal" href="#">
            <i data-tw-merge data-lucide="x" class="stroke-[1] w-5 h-5 w-8 h-8 text-slate-400 w-8 h-8 text-slate-400"></i>
        </a>
        <div data-tw-merge class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400">
            <h2 class="mr-auto text-base font-medium">
                Broadcast Message
            </h2>
            <button data-tw-merge class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 hidden sm:flex hidden sm:flex"><i data-tw-merge data-lucide="file" class="stroke-[1] w-5 h-5 w-4 h-4 mr-2 w-4 h-4 mr-2"></i>
                Download Docs</button>
            <div data-tw-merge data-tw-placement="bottom-end" class="dropdown relative sm:hidden"><a data-tw-toggle="dropdown" aria-expanded="false" href="javascript:;" class="cursor-pointer block w-5 h-5"><i data-tw-merge data-lucide="more-horizontal" class="stroke-[1] w-5 h-5 w-5 h-5 text-slate-500 w-5 h-5 text-slate-500"></i>
                </a>
                <div data-transition data-selector=".show" data-enter="transition-all ease-linear duration-150" data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1" data-enter-to="!mt-1 visible opacity-100 translate-y-0" data-leave="transition-all ease-linear duration-150" data-leave-from="!mt-1 visible opacity-100 translate-y-0" data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1" class="dropdown-menu absolute z-[9999] hidden">
                    <div data-tw-merge class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40">
                        <a class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"><i data-tw-merge data-lucide="file" class="stroke-[1] w-5 h-5 w-4 h-4 mr-2 w-4 h-4 mr-2"></i>
                            Download Docs</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- END: Slide Over Header -->
        <!-- BEGIN: Slide Over Body -->
        <div data-tw-merge class="p-5 overflow-y-auto flex-1">
            <div>
                <label data-tw-merge for="modal-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right">
                    From
                </label>
                <input data-tw-merge id="modal-form-1" type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10">
            </div>
            <div class="mt-3">
                <label data-tw-merge for="modal-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right">
                    To
                </label>
                <input data-tw-merge id="modal-form-2" type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10">
            </div>
            <div class="mt-3">
                <label data-tw-merge for="modal-form-3" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right">
                    Subject
                </label>
                <input data-tw-merge id="modal-form-3" type="text" placeholder="Important Meeting" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10">
            </div>
            <div class="mt-3">
                <label data-tw-merge for="modal-form-4" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right">
                    Has the Words
                </label>
                <input data-tw-merge id="modal-form-4" type="text" placeholder="Job, Work, Documentation" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10">
            </div>
            <div class="mt-3">
                <label data-tw-merge for="modal-form-5" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right">
                    Doesn't Have
                </label>
                <input data-tw-merge id="modal-form-5" type="text" placeholder="Job, Work, Documentation" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10">
            </div>
            <div class="mt-3">
                <label data-tw-merge for="modal-form-6" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right">
                    Size
                </label>
                <select data-tw-merge id="modal-form-6" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1">
                    <option>10</option>
                    <option>25</option>
                    <option>35</option>
                    <option>50</option>
                </select>
            </div>
        </div>
        <!-- END: Slide Over Body -->
        <!-- BEGIN: Slide Over Footer -->
        <div class="px-5 py-3 text-right border-t border-slate-200/60 dark:border-darkmode-400"><button data-tw-merge data-tw-dismiss="modal" type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 w-20 mr-1 w-20 mr-1">Cancel</button>
            <button data-tw-merge type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-20 w-20">Send</button>
        </div>
    </div>
    <!-- END: Slide Over Footer -->
</div>
<!-- END: Slide Over Content -->

The "Header & Footer Slide Over" component empowers you to create dynamic slide-over dialogs that are both informative and interactive. You can easily tailor the header and footer sections to suit your application's needs, making it a versatile solution for a wide range of use cases. Enhance your user experience by presenting content with clarity and providing users with intuitive actions through this feature.

Programmatically Show/Hide Slide Over

The "Programmatically Show/Hide Slide Over" feature provides you with the capability to control the visibility of the slide-over dialog through your code. This functionality allows you to trigger the opening, closing, or toggling of the slide-over programmatically, providing a seamless and interactive user experience.

Example code / preview
Show Slide Over 
            <!-- BEGIN: Show Slide Over Toggle -->
<div class="text-center">
    <a data-tw-merge id="programmatically-show-slideover" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 mr-1 mb-2 mr-1">Show Slide Over</a>
</div>
<!-- END: Show Slide Over Toggle -->
<!-- BEGIN: Slide Over Content -->
<div data-tw-backdrop="" aria-hidden="true" tabindex="-1" id="programmatically-slideover" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]">
    <div data-tw-merge class="w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-[margin-right] duration-[0.6s] -mr-[100%] group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]">
        <div data-tw-merge class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5">
            <h2 class="mr-auto text-base font-medium">
                Programmatically Show/Hide Slide Over
            </h2>
        </div>
        <div data-tw-merge class="p-5 overflow-y-auto flex-1 p-10 text-center"><!-- BEGIN: Hide Slide Over Toggle -->
            <a data-tw-merge id="programmatically-hide-slideover" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mr-1 mr-1">Hide Slide Over</a>
            <!-- END: Hide Slide Over Toggle -->
            <!-- BEGIN: Toggle Slide Over Toggle -->
            <a data-tw-merge id="programmatically-toggle-slideover" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mt-2 mr-1 sm:mt-0 mt-2 mr-1 sm:mt-0">Toggle Slide Over</a>
            <!-- END: Toggle Slide Over Toggle -->
        </div>
    </div>
</div>
<!-- END: Slide Over Content -->

The "Programmatically Show/Hide Slide Over" functionality enhances your control over the slide-over dialog, making it a dynamic and responsive element in your user interface. By using these programmatic methods, you can create engaging user experiences and tailor the slide-over's visibility to suit your application's needs. Whether it's showing additional information, capturing user input, or providing context-based interactions, this feature empowers you to take full control of your slide-over dialogs.

Component API

In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.

Below is a list of props that can be passed to the component:

Slideover
Prop Type Description
`as` `string` The HTML element type to be used for the Slideover (default is "div").
`open` `boolean` Indicates whether the Slideover is open or closed (default is false).
`onClose` `function` A function to be called when the Slideover is closed.
`staticBackdrop` `boolean` If true, the Slideover backdrop remains static when the Slideover is closed (default is false).
`size` `Size` The size of the Slideover, which can be "sm," "md," "lg," or "xl" (default is "md").
Slideover.Panel
Prop Type Description
`as` `string` The HTML element type to be used for the Slideover panel (default is "div").
Slideover.Title
Prop Type Description
`as` `string` The HTML element type to be used for the Slideover title (default is "div").
Slideover.Description
Prop Type Description
`as` `string` The HTML element type to be used for the Slideover description (default is "div").
Slideover.Footer
Prop Type Description
`as` `string` The HTML element type to be used for the Slideover footer (default is "div").