Kutsu

A lightweight, modern, pure JavaScript library for building interactive components.

📖 Documentation: https://kutsu-cv4.pages.dev

Installation

# npm
npm install @jukanntenn/kutsu

# pnpm
pnpm add @jukanntenn/kutsu

# yarn
yarn add @jukanntenn/kutsu

Or via CDN:

<!-- UMD (with Popper.js bundled) -->
<script src="https://cdn.jsdelivr.net/npm/@jukanntenn/kutsu/dist/kutsu.bundle.min.js"></script>

<!-- UMD (Popper.js external) -->
<script src="https://unpkg.com/@popperjs/core"></script>
<script src="https://unpkg.com/@jukanntenn/kutsu/dist/kutsu.min.js"></script>

Components

Offcanvas

A slide-in panel that overlays the main content, with optional backdrop support.

import { Offcanvas } from "@jukanntenn/kutsu";

const offcanvas = new Offcanvas(document.getElementById("myPanel"), {
  backdrop: true,
});

offcanvas.show();
offcanvas.hide();
offcanvas.toggle();

Dropdown

A positioned dropdown menu using Popper.js for placement.

import { Dropdown } from "@jukanntenn/kutsu";

const dropdown = new Dropdown(triggerElement, targetElement, {
  placement: "bottom",
});

dropdown.show();
dropdown.hide();
dropdown.toggle();

Scrollspy

Tracks scroll position and highlights the corresponding navigation link.

import { Scrollspy } from "@jukanntenn/kutsu";

const spy = new Scrollspy(navLinks, scrollContainer, {
  activeClassName: "active",
  offset: 50, // or a function: () => document.querySelector('header').offsetHeight
});

spy.dispose();

Browser Support

• Chrome 80+
• Firefox 72+
• Safari 13.1+
• Edge 80+

License

ISC