Overlays mobilesheetoverlay

Bottom Sheet

A mobile-optimized overlay that slides up from the bottom of the screen.

Select Option

Archive
Delete
Share

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { BottomSheet } from 'astro-component-kit';
---

<BottomSheetMobile>Content</BottomSheetMobile>
--- import { BottomSheet } from 'astro-component-kit'; --- <BottomSheetMobile>Content</BottomSheetMobile>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/BottomSheet.astro and paste the following code:

astro 
---
---
<div class="sheet-overlay">
  <div class="sheet-content">
    <div class="drag-handle"></div>
    <h3>Select Option</h3>
    <div class="options"><div>Archive</div><div>Delete</div><div>Share</div></div>
  </div>
</div>
<style>
  .sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: flex-end; z-index: 2000; }
  .sheet-content { width: 100%; background: #0f172a; border-radius: 20px 20px 0 0; padding: 1.5rem; transform: translateY(0); }
  .drag-handle { width: 40px; height: 4px; background: #334155; border-radius: 2px; margin: 0 auto 1.5rem; }
  h3 { color: #fff; text-align: center; margin-bottom: 1.5rem; }
  .options div { padding: 1rem; color: #e2e8f0; border-bottom: 1px solid #1e293b; text-align: center; cursor: pointer; }
</style>
--- --- <div class="sheet-overlay"> <div class="sheet-content"> <div class="drag-handle"></div> <h3>Select Option</h3> <div class="options"><div>Archive</div><div>Delete</div><div>Share</div></div> </div> </div> <style> .sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: flex-end; z-index: 2000; } .sheet-content { width: 100%; background: #0f172a; border-radius: 20px 20px 0 0; padding: 1.5rem; transform: translateY(0); } .drag-handle { width: 40px; height: 4px; background: #334155; border-radius: 2px; margin: 0 auto 1.5rem; } h3 { color: #fff; text-align: center; margin-bottom: 1.5rem; } .options div { padding: 1rem; color: #e2e8f0; border-bottom: 1px solid #1e293b; text-align: center; cursor: pointer; } </style>

Quick Info

Category
Overlays
Filename
BottomSheet.astro
Dependencies
None — pure Astro + CSS
Tags
mobilesheetoverlay