Pattern Lock: Free React + Tailwind Component

A 3×3 connect-the-dots unlock: drag to draw the pattern, with success/failure feedback animations.

The classic Android-style 3×3 pattern lock: drag with the pointer to connect the dots in order, the SVG line segments follow the pointer live, and each dot you pass swells and fills with colour; a line that jumps across a dot automatically adds the dot it passes through. Verification happens immediately on release — on success a green pulse spreads out in the order of the connections, on failure the whole thing shakes red and clears itself.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add pattern-lock.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Sizesize

280

Feedback hold time (ms)resetDelay

900

Show the visual hinthint

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<PatternLock/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/pattern-lock.en.json

Or, once registries are configured in components.json, install it as @webberui/pattern-lock.

Usage

import { PatternLock } from "@/components/ui/pattern-lock";

<PatternLock
  pattern={[0, 3, 6, 7, 8]}
  onSuccess={() => console.log("Unlocked")}
  onFail={(drawn) => console.log("Wrong pattern", drawn)}
/>

The dots are numbered left to right, top to bottom: 0 is top-left, 2 is top-right, 4 is the centre, and 8 is bottom-right.

Props

Prop	Type	Default	Description
`pattern`	`number[]`	—	The correct unlock pattern: a sequence of dot indices 0–8
`onSuccess`	`(drawn: number[]) => void`	—	Called on successful verification, with the sequence the user actually drew
`onFail`	`(drawn: number[]) => void`	—	Called on failed verification, with the sequence the user actually drew
`size`	`number`	`280`	Rendered side length of the component (px)
`resetDelay`	`number`	`900`	How long the success/failure feedback shows before it clears automatically (ms)
`hint`	`boolean`	`false`	Whether to show the correct pattern as a faint dashed hint
`className`	`string`	—	Forwarded to the outer container

Accessibility

When the user has "reduce motion" enabled at the system level, the shake and pulse animations are turned off and the verification result is conveyed by colour alone (green / red)
The verification result is announced to screen readers through an aria-live="polite" region as "unlocked" or "wrong pattern"
The SVG carries a descriptive aria-label explaining that this is a draggable 3×3 connect-the-dots pattern lock
On touch devices, touch-action: none prevents the page from scrolling along with the drag, and pointercancel is supported to interrupt and restore
A pattern lock is only suitable as a low-strength convenience check; important operations should still be paired with another form of verification

Pattern Lock