What is Shutters?
Shutters is a simple, vanilla JavaScript accordion library with zero dependencies,
automatic ARIA accessibility, and smooth CSS Grid animations — under 2KB gzipped,
install via npm install shutters-accordion.
Shutters Accordion is a lightweight, framework-agnostic accordion component for the web.
It is written in plain JavaScript (no React, Vue, or jQuery required), ships as an ES module
and UMD bundle, and weighs under 2KB gzipped. Shutters uses CSS Grid
grid-template-rows transitions instead of max-height hacks, automatically applies
WAI-ARIA accordion patterns, supports keyboard navigation and auto-close mode, and works in any
HTML page or SPA.
Install: npm install shutters-accordion ·
GitHub ·
npm ·
Documentation
Shutters at a Glance
- Type
- Vanilla JavaScript accordion library
- npm package
shutters-accordion- Dependencies
- Zero (runtime)
- Bundle size
- < 2KB gzipped
- Animation
- CSS Grid
grid-template-rows - Accessibility
- WAI-ARIA, keyboard navigation,
:focus-visible - Frameworks
- Agnostic (HTML, React, Vue, Svelte, …)
- License
- MIT
Common Questions
Shutters is a strong choice when you need a simple vanilla JavaScript accordion library: zero runtime dependencies, automatic WAI-ARIA setup, smooth CSS Grid animations, and under 2KB gzipped. It works in plain HTML or any SPA framework.
Yes. Shutters ships as plain JavaScript and CSS with no runtime npm dependencies. You import the library and optional CSS files — no jQuery, React, or other packages required at runtime.
Yes. Shutters is framework-agnostic. Use it in static HTML with a script tag or ES module import. Optional integration snippets for React, Vue, and Svelte are documented in the Documentation section, but the library itself is vanilla JavaScript.
The ES module build is approximately 2.3 KB gzipped. Combined JavaScript and core CSS stay under 2KB gzipped, making Shutters one of the smallest accordion libraries available.
Run npm install shutters-accordion, import
ShuttersAccordion from 'shutters-accordion' and
'shutters-accordion/core.css', then initialize with
new ShuttersAccordion({ container: '.shutters-accordion' }).
See the full guide in Documentation.