<!--:Offcanvas trigger:-->
<button data-bs-target="#offcanvasDemo" data-bs-toggle="offcanvas" class="btn btn-default">
    Open Offcanvas
</button>

<!--:Offcanvas end:-->
<div class="offcanvas fixed end-0 top-0 w-72 h-full z-[70] bg-white dark:bg-stone-900 shadow-sm transition-all ltr:translate-x-full rtl:-translate-x-full [.show]:translate-x-0"
    tabindex="-1" id="offcanvasDemo" aria-labelledby="offcanvasDemoLabel">
    <div class="flex flex-col h-full">
        <!--:Header:-->
        <div class="p-4 shrink-0 border-b border-stone-100 dark:border-stone-800 flex items-center justify-between">
            <h5 class="text-lg">Offcanvas Title</h5>
            <!--:Close:-->
            <button type="button"
                class="btn btn-default !p-0 !rounded-full size-8"
                data-bs-dismiss="offcanvas" aria-label="Close">
                <span class="icon-[lucide--x] text-xl"></span>
            </button>
        </div>
        <!--:Content:-->
        <div class="p-4 flex-grow overflow-y-auto">
           Content...
        </div>
    </div>
</div>

<!--:Offcanvas large:-->
<div class="offcanvas fixed end-0 top-0 w-[90%] md:w-[80%] h-full z-[70] bg-white dark:bg-stone-900 shadow-sm transition-all ltr:translate-x-full rtl:-translate-x-full [.show]:translate-x-0"
    tabindex="-1" id="offcanvasLarge" aria-labelledby="offcanvasLargeLabel">
</div>

<!--:Offcanvas Top:-->
<div class="offcanvas fixed start-0 top-0 w-full h-[70%] z-[70] bg-white dark:bg-stone-900 shadow-sm transition-all -translate-y-full [.show]:translate-y-0"
    tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
</div>

<!--:Offcanvas Bottom:-->
<div class="offcanvas fixed start-0 bottom-0 w-full h-[70%] z-[70] bg-white dark:bg-stone-900 shadow-sm transition-all translate-y-full [.show]:translate-y-0"
    tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
</div>