Skip to content

Alpine.js Toolkit

@ailuracode · Interactive plugin demos

Media

Reactive viewport breakpoints, dimensions, and browser media features.

Store$store.media
Read Documentation@ailuracode/alpine-media
Media$store.media
Reactive viewport breakpoints, dimensions, and browser media features.

Viewport

  • Width: px
  • Height: px
  • Breakpoint:
MobileTabletDesktop

Media features

  • prefersReducedMotion:
  • prefersContrast:
  • prefersColorScheme:
  • hover:
  • pointer:
  • orientation:

Touch & pointer

  • isTouch:
  • maxTouchPoints:
  • isCoarse:
  • canHover:

Resize the window or change OS media preferences to see live updates.

Package: @ailuracode/alpine-media