1 GitHub star = 1 new component.

Star the repo
Overlaysmobilesheetoverlay

Bottom Sheet

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

Select Option

Archive
Delete
Share

Usage

Copy and paste this code into your React component:

tsx
import { BottomSheetMobile } from 'react-component-kit-ui/overlays';

<BottomSheetMobile>Content</BottomSheetMobile>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/BottomSheetMobile.tsx + BottomSheetMobile.css:

BottomSheetMobile.tsx
'use client';

import './BottomSheetMobile.css';

/** BottomSheetMobile โ€” ported from astro-component-kit. */
export interface BottomSheetMobileProps {
}

export function BottomSheetMobile({}: BottomSheetMobileProps) {
  return (
    <>
      <div className="sheet-overlay" data-rk-61863a="">
        <div className="sheet-content" data-rk-61863a="">
          <div className="drag-handle" data-rk-61863a=""></div>
          <h3 data-rk-61863a="">Select Option</h3>
          <div className="options" data-rk-61863a=""><div data-rk-61863a="">Archive</div><div data-rk-61863a="">Delete</div><div data-rk-61863a="">Share</div></div>
        </div>
      </div>
    </>
  );
}

export default BottomSheetMobile;
BottomSheetMobile.css
/* BottomSheetMobile โ€” ported from astro-component-kit (overlays/BottomSheetMobile.astro) */

.sheet-overlay:where([data-rk-61863a]) { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: flex-end; z-index: 2000; }
.sheet-content:where([data-rk-61863a]) { width: 100%; background: #0f172a; border-radius: 20px 20px 0 0; padding: 1.5rem; transform: translateY(0); }
.drag-handle:where([data-rk-61863a]) { width: 40px; height: 4px; background: #334155; border-radius: 2px; margin: 0 auto 1.5rem; }
h3:where([data-rk-61863a]) { color: #fff; text-align: center; margin-bottom: 1.5rem; }
.options:where([data-rk-61863a]) div:where([data-rk-61863a]) { padding: 1rem; color: #e2e8f0; border-bottom: 1px solid #1e293b; text-align: center; cursor: pointer; }

Quick Info

Category
Overlays
Filename
BottomSheetMobile.tsx
Dependencies
None โ€” pure React + CSS
Tags
mobilesheetoverlay