Installation
Stisla ships as a stylesheet and a small JS runtime. Drop them in from a CDN, or install from a package manager.
Using CDN
No build step. Drop the two files into a plain HTML page: the stylesheet in the <head>, the runtime at the end of the <body>. They cover every component.
The runtime is a classic script. It exposes window.Stisla and auto-initializes any data-stisla-* markup already in the page, so it carries no type="module".
The @3 tag tracks the latest 3.x release. Pin an exact version instead for fully reproducible builds.
Using package manager
The same pieces, resolved and bundled by your build tool.
Import the stylesheet and the runtime once at your app entry. That covers every component.
Once the runtime is loaded, the JavaScript page covers driving components from markup or from JS.
To ship only the components you use, install @stisla/style instead of the precompiled bundle and compile a subset from source. The Optimization page walks through it.
Components that carry a library
Three components pull in a third-party library, which is most of the runtime’s weight. They ship in the bundle like everything else, so nothing extra is needed to use them. If you don’t use them and want their libraries left out, compile a subset from the style source.
| Component | Library |
|---|---|
| Carousel | Embla |
| Combobox (searchable, multi-select, tagging) | Tom Select |
| Scroll area (custom scrollbars) | OverlayScrollbars |
Browser support
Safari 16.4 or newer, Chrome 111 or newer, and Firefox 121 or newer. No polyfills. The features Stisla relies on (OKLCH, color-mix, :has(), @layer, container queries, inert) are stable across that range. If you need to support older browsers, falling back to an earlier version of the framework won’t help, because the runtime token surface is what makes Stisla what it is.
What’s next
Learn how JavaScript wires up components, pick a primary color, or jump straight into the component pages.