##### Recently Browses

- Apps Api
- Dashboard Marketing

##### Memebers

- Ethan Smith Backend Developer
- Isabella Garcia Digital Marketer
- Noah Walker Full Stack Developer

##### Filters

- customers:
  All customers list
- products:
  Bestselling products
- events:
  All upcoming events

## Modal

1. Home
3. Components
5. Modal

##### Default

    <!--:Modal trigger:-->
    <button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#modalDefault">
        Show modal
    </button>

    <!--:Modal Default:-->
    <div id="modalDefault" role="dialog"
        class="modal fade fixed w-full h-full left-0 top-0" tabindex="-1">
        <div class="modal-dialog relative m-4 min-h-[calc(100%-2rem)] pointer-events-none">
            <!--:Modal content:-->
            <div
                class="modal-content relative max-w-[30rem] mx-auto bg-white dark:bg-zinc-900 rounded-xl w-full pointer-events-auto">
                <!--:Close:-->
                <button type="button"
                    class="absolute right-2 top-2 btn btn-default !p-0 !rounded-full size-8"
                    data-bs-dismiss="modal">
                    <span class="icon-[lucide--x] text-xl"></span>
                </button>
                <div class="p-4 lg:p-6">
                    <h5 class="text-lg mb-2">Modal Title</h5>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </div>
        </div>
    </div>

##### Full width

    <!--:Modal trigger:-->
    <button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#modalFullWidth">
        Show modal
    </button>

    <!--:Modal Full Width:-->
    <div id="modalFullWidth" role="dialog"
        class="modal fade fixed w-full h-full left-0 top-0" tabindex="-1">
        <div class="modal-dialog relative m-4 min-h-[calc(100%-2rem)] pointer-events-none">
            <!--:Modal content:-->
            <div class="modal-content relative max-w-full mx-auto bg-white dark:bg-zinc-900 rounded-xl w-full pointer-events-auto">
                <!--:Close:-->
                <button type="button"
                    class="absolute right-2 top-2 btn btn-default !p-0 !rounded-full size-8"
                    data-bs-dismiss="modal">
                    <span class="icon-[lucide--x] text-xl"></span>
                </button>
                <div class="p-4 lg:p-6">
                    <h5 class="text-lg mb-2">Modal Title</h5>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </div>
        </div>
    </div>

##### Center aligned + scrollable

    <!--:Modal trigger:-->
    <button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#modalCenter">
        Show modal
    </button>

    <!--:Modal Center + scroll:-->
    <div id="modalCenter" role="dialog" class="modal fixed w-full h-full left-0 top-0"
        tabindex="-1">
        <div class="modal-dialog relative flex items-center justify-center m-4 h-[calc(100vh-2rem)] pointer-events-none">
            <!--:Modal content:-->
            <div
                class="modal-content relative overflow-hidden max-w-[30rem] mx-auto bg-white dark:bg-zinc-900 rounded-xl w-full pointer-events-auto">
                <div class="p-4 border-b border-zinc-100 dark:border-zinc-800 flex items-center justify-between">
                    <h5 class="text-lg">Modal Title</h5>
                    <!--:Close:-->
                    <button type="button"
                        class="btn btn-default !p-0 !rounded-full size-8"
                        data-bs-dismiss="modal">
                        <span class="icon-[lucide--x] text-xl"></span>
                    </button>
                </div>
                <div class="h-[60vh] overflow-y-auto p-4">
                    <p class="mb-4 text-lg">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                        cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <p class="mb-4">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                        cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                        cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </div>
        </div>
    </div>

##### Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

##### Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

##### Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.