# micromodal

> Tiny javascript library for creating accessible modal dialogs

Latest version **0.7.0** (published 2026-06-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install micromodal
pnpm add micromodal
yarn add micromodal
bun add micromodal
```

## Health

**Score 63/100 (C)** — status: active.

Positive: has types package; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2026-06-03 |
| First published | 2017-09-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | separate (@types/micromodal) |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 31.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3658 |
| Author | Indrashish Ghosh |
| Maintainers | ghosh, dkniffin |
| Keywords | a11y, modal, accessible |

## Links

- npm: https://www.npmjs.com/package/micromodal
- Repository: https://github.com/ghosh/micromodal
- Issues: https://github.com/ghosh/micromodal/issues
- npm.io page: https://npm.io/package/micromodal

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.7.0 (latest) — 2026-06-03
- 0.6.2 — 2026-05-31
- 0.6.1 — 2025-03-21
- 0.6.0 — 2025-03-21
- 0.5.2 — 2025-03-18
- 0.5.1 — 2025-03-18
- 0.5.0 — 2025-03-18
- 0.4.10 — 2021-11-27
- 0.4.9 — 2021-11-23
- 0.4.8 — 2021-11-23
- 0.4.7 — 2021-11-23
- 0.4.6 — 2020-03-26
- 0.4.5 — 2020-03-25
- 0.4.4 — 2020-03-25
- 0.4.3 — 2020-03-25
- … 10 more at https://npm.io/package/micromodal/versions

## README

<p align="center">
  <img src="https://www.dropbox.com/s/tbaooyi4yh8pbi7/logo.png?raw=1" width="100px"/>
</p>
<h3 align="center">
  Micromodal.js
</h3>

<p align="center">
  <a href="#">
    <img src="https://img.shields.io/badge/made%20with-love-E760A4.svg" alt="Made with love">
  </a>
  <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener">
    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License">
  </a>
  <a href="https://www.npmjs.com/package/micromodal" target="_blank" rel="noopener">
    <img src="https://img.shields.io/npm/v/micromodal.svg" alt="Package version">
  </a>
  <a href="https://travis-ci.org/ghosh/micromodal" target="_blank" rel="noopener">
    <img src="https://api.travis-ci.org/ghosh/micromodal.svg" alt="Build Status">
  </a>
</p>

<p align="center">
  Tiny, dependency-free javascript library for creating accessible modal dialogs
</p>

---

<img src="https://www.dropbox.com/s/8g7fr091tk8o62j/micromodal.gif?raw=1" width="100%">

The aim of this library is to make modal dialogs accessible and easy to include in your project with minimum configuration. It's only ~1.8kb minified and gzipped - A tiny library for big change.

**[Demo and documentation](https://micromodal.now.sh/)**

&nbsp;

## Features
✔ Toggles relevant aria attributes on open and close

✔ Closes modal on overlay click

✔ Closes modal on pressing the `esc` key

✔ Traps tab focus within the modal

✔ Focuses on the first focusable element within the modal

✔ Retains the focused element state after closing the modal

&nbsp;

## Installation

**via npm**
```shell
npm install micromodal --save
```

**via yarn**
```shell
yarn add micromodal
```

**via CDN direct link**
```html
<script src="https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
```

**direct download**
```shell
curl -o https://unpkg.com/micromodal/dist/micromodal.min.js
```

&nbsp;

## IE 11 and below

Please use this pollyfill suggested [here](https://github.com/ghosh/Micromodal/issues/49#issuecomment-424213347).

&nbsp;

## Changelog

Find the latest changelog [here](https://github.com/ghosh/micromodal/blob/master/CHANGELOG.md).

&nbsp;

## Contributing

We are always open and invite developers to contribute to Micromodal. We have kept the guidelines and process dead simple, so you invest more time in making modals accessible to all.

Micromodal follows the [standardjs](https://standardjs.com/) coding standard and is part of our `package.json` file. It will help us to maintain consistency in the code base.

#### Development setup
1. Clone Github repo `$ git clone https://github.com/ghosh/micromodal.git`
2. Install `yarn` package manager (Read [installation guide](https://yarnpkg.com/en/docs/install#mac-tab))
3. Run `yarn install` in the root folder to install all dependencies
4. Run `yarn dev` to start a dev server. This serves the example directory and live reloads when any files are changed
5. [Optional] Run `yarn build` to build the files for distribution. This is run automatically as a pre-commit hook as well.
6. Send us pull request and chill

&nbsp;

## Licensing
This project is licensed under [MIT license](https://opensource.org/licenses/MIT).

&nbsp;
## Related
- [Microtip](https://github.com/ghosh/microtip) - Modern, lightweight, accessible css tooltip library. Just 1kb.

&nbsp;

## Contact
You can mention us on Twitter for any questions, suggestions or just send us funny GIF. We ♥️ GIFs.

#### Tweet some love
[Tweet](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgoo.gl%2FsEgnBZ&text=Make%20your%20modal%20dialogs%20accessible%20to%20all%20using%20Micromodal.js%2C%20a%20tiny%20library%20for%20big%20change.&hashtags=a11y "Tweet about Micromodal") about Micromodal and help us to spread the message about the importance of Web accessibility and Inclusive design.

&nbsp;

## Created and maintained by

Indrashish Ghosh – [@_ighosh](https://twitter.com/_ighosh) 🇮🇳

Kalpesh Singh - [@knowkalpesh](https://twitter.com/knowkalpesh) 🇮🇳

Darpan Kakadia - [@kakadiadarpan](https://twitter.com/kakadiadarpan) 🇩🇪

Contributors - [list](https://github.com/ghosh/micromodal/graphs/contributors) 🌐

---
_Source: https://npm.io/package/micromodal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._