Knack — Vanilla JS UI Components

No — Knack is completely dependency-free and requires no build step. Just drop in the single stylesheet and single script file, add data-knack-* attributes to your HTML markup, and everything works out of the box. It is written as ES modules and is compatible with any framework or plain HTML.

Knack includes six polished components: Modal, Tabs, Accordion, Dropdown, Toast, and Tooltip. Every component is accessible by default, with ARIA roles, full keyboard navigation, and focus management — the Modal also includes a focus trap and scroll lock.

You can use the declarative autoInit() approach by simply adding data-knack-* attributes to your markup, which requires no custom JavaScript at all. If you need programmatic control, each component also exposes an imperative class API, and the library fires custom events (such as knack:open, knack:close, and knack:tabchange) so you can hook into component behaviour from your own code.

Yes — theming is handled entirely through CSS variables defined in Knack's single stylesheet, so you can override colours, spacing, and other visual properties with just a few lines of CSS. No Sass, no build pipeline, and no need to edit the library's source files.

The Toast component ships with four built-in variants: success, warning, danger, and info. Each variant is styled distinctly out of the box and can be further customised via CSS variables.

Yes — Knack includes a node:test and jsdom-based test suite to verify component behaviour. There are also live showcase and component reference pages available so you can interact with every component and review the API before making a purchase decision.