Interactive demos

Playground

Explore Alpine Toolkit packages by functional category and composed families. Each package demo remains directly addressable from its family or category page.

Categories: 6
Package demos: 33
Stack: Alpine · Astro

Runtime & Composition

Plugin registry, overlay portal, keyboard routing, directives, and shared composition primitives.

Overlay

Store

Portal root, z-index stack, and overlay registry used by dialog, menu, tooltip, and command.

$store.overlay / $overlay

Open Demo Docs

Keyboard

Store

Scoped keyboard shortcut registry with chords, sequences, and conflict resolution.

$store.keyboard / $keyboard

Open Demo Docs

Child

Directive

asChild-style directive that merges wrapper attributes onto the first child.

x-child

Open Demo Docs

Application Shell

Theme, layout, scroll, sidebar, and language preferences for app shells.

Theme

Store

Light, dark, and system color modes with persistence and pluggable DOM strategies.

$store.theme

Open Demo Docs

Media

Store

Reactive viewport breakpoints, dimensions, and browser media features.

$store.media

Open Demo Docs

Scroll

Store

Scroll position tracking, section observer, and handle-based body lock.

$store.scroll / $scroll

Open Demo Docs

Sidebar

Store

Open, close, and toggle visibility for application shells.

$store.sidebar

Open Demo Docs

Lang

Store

Detect, query, and change the current application language.

$store.lang

Open Demo Docs

Browser Capabilities

Environment signals, transfer APIs, notifications, geolocation, and permissions.

Permissions

Store

Unified browser permission registry with a typed adapter contract.

$store.permissions / $permissions

Open Demo Docs

Notify

Magic

Browser notifications and push permission helpers.

$notify

Open Demo Docs

Geo

Store

Geolocation coordinates, accuracy, and permission state.

$store.geo

Open Demo Docs

Attention

Magic

Wake Lock and Idle Detection for presentations and session-aware UI.

$wakelock · $idle

Open Demo Docs

Env

Magic

Browser environment magics and optional headless environment controller.

$network · $visibility · $battery · $platform

Open Demo Docs

Transfer

Magic

Clipboard copy, Web Share API, and programmatic downloads.

$clipboard · $share · $export

Open Demo Docs

Interaction Primitives

Toggle state, child composition, and pointer gesture recognition.

Toggle

Magic

Binary and ternary toggle state factories for segmented controls and filters.

$toggle

Open Demo Docs

Gesture

Store

Headless pointer gesture recognition — tap, swipe, pan, pinch, and long-press.

$store.gesture / x-gesture

Open Demo Docs

History

Store

Headless undo/redo history controller with transactions, persistence, and configurable limits.

$store.history / $history

Open Demo Docs

Timer

Magic

Drift-resistant countdown, countup, and stopwatch factories for Alpine components.

$timer

Open Demo Docs

Headless UI

Accessible dialog, menu, tooltip, toast, tabs, and related UI state machines.

Dialog

Store

Accessible modal state with focus trap, scroll-lock hooks, and ARIA helpers.

$store.dialog

Open Demo Docs

Tooltip

Store

Tooltip open/close state with hover and focus delays.

$store.tooltip

Open Demo Docs

Toast

Magic

Headless toast queue with timed and persistent stacks.

$toast

Open Demo Docs

Tabs

Store

Accessible tabs with keyboard navigation and optional URL query sync.

$store.tabs

Open Demo Docs

Accordion

Store

Single or multi-open accordion state with keyboard focus and ARIA helpers.

$store.accordion

Open Demo Docs

Command

Store

Spotlight-style command palette with searchable actions and shortcuts.

$store.command

Open Demo Docs

Carousel

Store

Accessible carousel store powered by Embla.

$store.carousel

Open Demo Docs

Virtual

Store

Headless virtual list controller with fixed and variable item sizes.

$store.virtual / $virtual

Open Demo Docs

Selection

Store

Framework-agnostic selection primitives with single, multiple, and range modes.

$store.selection / $selection

Open Demo Docs

Form

Store

Headless form state and validation — dirty, touched, valid, submitting, async validation, server error mapping, and reset, without replacing x-model.

$store.form / $form

Open Demo Docs

Data & Networking

Query cache, JSON:API client, calendars, and data-fetching adapters.

Query Stack

Query

Core

Store-agnostic query cache with pluggable reactivity adapters.

createQueryClient · query({ adapter })

Open Demo Docs

Query kit

Core

Recommended query stack: cache, Nanostores adapter, and optional devtools panel.

$store.query · devtools

Open Demo Docs

Calendar

Magic

Locale-aware month grids, navigation, and date selection.

$calendar

Open Demo Docs

JSON:API

Magic

Typed JSON:API client with resource schemas and compound document parsing.

$jsonapi

Open Demo Docs