Modular Alpine.js toolkit

Lazy-loaded, headless plugins for theme, layout, toasts, and more — install only what you need, wire your own markup and CSS.

Modular toolkit for Alpine.js by ailuracode — framework-agnostic, npm-published, TypeScript-ready.

What is this?

@ailuracode/alpinejs-toolkit is not a grab-bag of unrelated plugins — it is a modular Alpine toolkit built around three ideas:

Pillar	What you get
Lazy init	`@ailuracode/alpine-core` registers plugins without running them at import time; load code on demand with dynamic `import()`.
Headless	Stores and magics only — no CSS, no UI components, no Tailwind assumptions. You apply styles via callbacks.
Modern DX	TypeScript globals (`$store.theme`, `$toast`), tree-shakeable npm packages, SSR-safe loaders.

Start with Essentials — the modules most apps need first. Add Extended and Advanced packages only when you need them.

Package	API	Use when
Theme	`$store.theme`	Light / dark / system preference
Media	`$store.media`	Viewport breakpoints and media features
Scroll	`$store.scroll`	Scroll progress, body lock for overlays
Sidebar	`$store.sidebar`	Drawer / nav shell state

State and behavior only — you provide markup and CSS.

Package	API	Use when
Dialog	`$store.dialog`	Modals, focus trap, dismiss
Menu	`$store.menu`	Dropdowns and context menus
Tooltip	`$store.tooltip`	Hover/focus tooltips
Toast	`$toast`	In-app messages; `fromPayload` for plain objects
Tabs	`$store.tabs`	Tab panels with keyboard nav
Accordion	`$store.accordion`	Expand/collapse sections
Command	`$store.command`	Command palette / Spotlight
Carousel	`$store.carousel`	Slideshows and carousels
Gesture	`$store.gesture` / `x-gesture`	Tap, swipe, pan, pinch via pointer events