Haptics

Craft

Phone haptics (web-haptics) built into buttons, toggles, tabs, toasts and invalid fields, plus the viewer on/off setting.

Motion: Presets: light (press), selection (toggle), rigid (destructive), success / warning / error.

Haptic feedback

Open this page on your phone and try the buttons

Installation

npx shadcn@latest add @craft/haptics-toggle

Source

components/ui/haptics-toggle.tsx

"use client"

import * as React from "react"
import { cn } from "cn"

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { useHaptics } from "@/lib/haptics"

/**
 * Viewer setting for phone haptics (stored per browser by HapticsProvider).
 * Put it in a settings page or the user menu — haptics are on by default.
 */
function HapticsToggle({ className, label = "Haptic feedback", ...props }: React.ComponentProps<"div"> & { label?: string }) {
  const { enabled, setEnabled } = useHaptics()
  const id = React.useId()
  return (
    <div data-slot="haptics-toggle" className={cn("flex items-center justify-between gap-3", className)} {...props}>
      <Label htmlFor={id}>{label}</Label>
      <Switch id={id} checked={enabled} onCheckedChange={setEnabled} />
    </div>
  )
}

export { HapticsToggle }