# Bottom Sheets

Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.

insert content

insert content

## Bottom Sheets

The following example is the default bottom sheets component. You have to add `.show` classes to show components. Use javascript or your favorite framework to add classes.

    <!-- trigger bottom sheets -->
    <button data-type="sheets" data-target="#sheets_sa">Show Sheets</button>

    <!-- bottom sheets -->
    <div id="sheets_sa" class="[&.show_.sheet]:translate-y-0">
      <!-- bottom sheets content -->
      <div class="sheet bottom-0 fixed left-0 right-0 z-[60] transition-transform translate-y-full duration-[400ms] flex flex-col items-center w-full sm:w-5/6 lg:w-2/3 gap-4 sm:mx-auto rounded-t-[28px] min-h-[40%] max-h-[60%] bg-surface-100 dark:bg-surfacedark-100 shadow-xl">
        <!-- close sheets -->
        <button data-close="#sheets_sa" class="absolute right-6 top-6">
          <span class="material-symbols-outlined ml-auto icon-active">close</span>
        </button>
        <div class="flex justify-center p-4 w-full h-9">
          <div class="w-8 h-1 opacity-40 bg-gray-500 rounded-full"></div>
        </div>

        <!-- content -->
        <div class="relative px-4 text-center">
           <p>insert content</p>
        </div>
      </div>
    </div>

## Bottom Sheets Dialogs

The following example is dialogs bottom sheets component. You have to add `.show` classes to show components. Use javascript or your favorite framework to add classes.

    <!-- trigger bottom sheets dialogs -->
    <button data-type="dialogs" data-target="#sheets_sb">Show Sheets</button>

    <!-- bottom sheets dialogs -->
    <div id="sheets_sb" class="[&.show_.bg-sheets]:opacity-60 [&.show_.bg-sheets]:inset-0 [&.show_.content-sheets]:translate-y-0">
      <!-- background sheets dialogs -->
      <div data-close="#sheets_sb" class="bg-sheets fixed z-[60] opacity-0 -top-full bg-black"></div>

      <!-- bottom sheets dialogs content -->
      <div class="content-sheets fixed left-0 right-0 bottom-0 z-[70] transition-transform translate-y-full duration-[400ms] flex flex-col items-center w-full md:w-5/6 lg:w-1/2 gap-3 sm:mx-auto rounded-t-[28px] min-h-[40%] max-h-[70%] bg-surface-100 dark:bg-surfacedark-100 shadow-xl">
        <div class="flex justify-center p-4 w-full h-9">
          <div class="w-8 h-1 opacity-40 bg-gray-500 rounded-full"></div>
        </div>

        <div class="relative px-4 text-center">
           <p>insert content</p>
        </div>
      </div>
    </div>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts