Pattern Lock
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.
npx shadcn@latest add https://webberui.com/r/pattern-lock.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<PatternLock />
Installation
npx shadcn@latest add https://webberui.com/r/pattern-lock.jsonOr, 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-labelexplaining that this is a draggable 3×3 connect-the-dots pattern lock - On touch devices,
touch-action: noneprevents the page from scrolling along with the drag, andpointercancelis 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
Wheel Time Picker
An iOS-style 3D wheel for picking a time: momentum scrolling, snapping, and a perspective arc.
Star Rating (React)
A classic star rating React component: half stars, hover-preview fill, arrow and number key control, a bounce on select, and a read-only mode that shows the average, review count and a distribution chart; icon, colour and star count are all customisable.