Haptic Feedback

Trigger haptic feedback on mobile devices.

Scan the QR code below to
try it out on mobile.

Loading…

"use client"
 
import { QRCodeSVG } from "qrcode.react"
import { useEffect, useState } from "react"
 
import { Button } from "@/components/ui/button"
import { haptic } from "@/lib/haptic"
 
export default function HapticDemo() {
  return (
    <div className="flex flex-col items-center gap-6 py-16 pointer-coarse:py-0">
      <Button onClick={() => haptic()}>Haptic</Button>
 
      <ScanToTryOnMobile />
    </div>
  )
}
 
function ScanToTryOnMobile() {
 
  const [href, setHref] = useState<string | undefined>(undefined);
 
  useEffect(() => {
    if (typeof window === "undefined") return
    setHref(window.location.href);
  }, [])
 
  return (
    <div className="flex flex-col items-center gap-6 pointer-coarse:hidden">
      <p className="text-center text-sm text-muted-foreground">
        Scan the QR code below to
        <br />
        try it out on mobile.
      </p>
 
      {href && <div className="flex size-24 items-center justify-center rounded-lg border dark:border-transparent">
        <QRCodeSVG value={href} size={80} />
      </div>}
    </div>
  )
}

Features

Uses Vibration API on Android and iOS checkbox trick on iOS.
Supports custom duration and vibration patterns on Android devices.
The haptic functionality was inspired by the Vercel mobile experience.

Installation

Add the registry

Skip if already installed

$ pnpm dlx shadcn@latest registry add @carlos-dubon=https://carlosdubon.dev/r/{name}.json

Add the component

$ pnpm dlx shadcn@latest add @carlos-dubon/haptic

Usage

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

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

Haptic feedback should not be used arbitrarily. For best practices, please refer to Apple's Human Interface Guidelines on Playing haptics.

API Reference

Prop

Type

Command Palette