Haptic Feedback

Trigger haptic feedback on mobile devices.

Visit on mobile to experience haptic feedback.

"use client"
 
import { Button } from "@/components/ui/button"
import { haptic, supportsHaptic } from "@/lib/haptic"
 
export function HapticDemo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button onClick={() => haptic()}>Haptic</Button>
 
      {!supportsHaptic && (
        <p className="text-sm text-muted-foreground">
          Visit on mobile to experience haptic feedback.
        </p>
      )}
    </div>
  )
}

Features

Uses Vibration API on Android and iOS checkbox trick on iOS.
Supports custom duration and vibration patterns on Android devices.
Automatically detects mobile device support via pointer media query.
Gracefully degrades on desktop devices.

Installation

$ pnpm dlx shadcn add @ncdai/haptic

Usage

import { haptic } from "@/lib/haptic"

<Button onClick={() => haptic()}>Haptic</Button>

Examples

Custom Duration

// Only work on Android devices.
<Button onClick={() => haptic(200)}>Long vibration</Button>

Vibration Pattern

Accepts an array for alternating vibrate/pause patterns. See Vibration API docs for details.

// Only work on Android devices.
<Button onClick={() => haptic([200, 100, 200])}>Pattern</Button>

API Reference

Prop

Type