<p align="center">
  <a href="https://plain-bottom-sheet-pbs-docs.vercel.app/">
    <img src="./documents/assets/header.png" width="328" height="167">
  </a>
</p>

<a href="https://bundlejs.com/?q=plain-bottom-sheet-core@0.4.1" target="\_parent">
  <img alt="" src="https://deno.bundlejs.com/badge?q=plain-bottom-sheet-core@0.4.1&badge=detailed" />
</a>

<a href="https://bundlejs.com/?q=@plainsheet/react-plain-bottom-sheet@0.0.1" target="\_parent">
  <img alt="" src="https://deno.bundlejs.com/badge?q=@plainsheet/react-plain-bottom-sheet@0.0.1" />
</a>

<a href="https://codecov.io/gh/PeterByun/plain-bottom-sheet" > 
 <img src="https://codecov.io/gh/PeterByun/plain-bottom-sheet/graph/badge.svg?token=WFHGUAI3GC"/> 
</a>

The **minimalistic**, **configurable** bottom sheet for any web project.

### [Check out our website](https://plain-bottom-sheet-pbs-docs.vercel.app/), for a quick start guide, APIs, examples, and more!

## Why?

### 🧩 Framework-agnostic

Works with vanilla JavaScript🍦, or React ⚛️.

### ⛓️‍💥 Zero Dependencies

So your app does not depend on any other libraries that you don't need.

### ☁️ Super Lightweight(Only 7 kB, compressed)

So you don't have to compromise loading speed.

### 📱 Mobile-friendly

Works just like the native bottom sheet.

### 🎛 Highly Configurable

- Style it anyway you want, using CSS.
- Change its behaviors, on the fly.
- Hook into life-cycle events, and states.

### 🦮 Accessibility Support

Keyboard interactions and focus management works out-of-box.

### 🍰 Works Out of The Box

Without any configs.

### 🦾 Fully-typed

### ⚡️ Performant By Default

## Philosophy

As the name suggests, we strive to make the plain bottom sheet minimalistic yet feature-rich and highly configurable.  
We try our best to write concise, well-tested, and maintainable code to achieve this goal.

## Support the project 🤍

We very much appreciate all your support.

- If you find it useful or interesting, please [star the repository](https://github.com/plainsheet/plain-bottom-sheet/stargazers),
- [Share this repository](https://github.com/plainsheet/plain-bottom-sheet?tab=readme-ov-file) with others, if you would like to.
- If you find any issues, feel free to [open an issue](https://github.com/plainsheet/plain-bottom-sheet/issues). We appreciate every opinion.
