Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA lock screen in two flavors: macOS with a live clock, avatar and a password field that shakes when wrong, and iOS with a clock, notifications and swipe up to unlock.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "mac" | "ios" | "mac" | mac shows a password field under an avatar; ios shows notifications and a swipe-up unlock. |
locked | boolean | - | Controlled state. While true the lock screen covers its positioned parent. |
defaultLocked | boolean | true | Initial state when uncontrolled. |
onLockedChange | (locked: boolean) => void | - | Called with the new state when the screen unlocks. |
time | string | - | Time to show. Omit for a live clock. |
date | string | - | Date to show. Omit for the live date. |
name | string | "Alex Morgan" | Name under the avatar (mac). |
avatar | ReactNode | - | Replaces the default initials avatar (mac). |
password | string | - | The correct password (mac). Without it, any entry unlocks. |
onUnlock | (password: string) => boolean | void | - | Extra check on the entered password (mac). Return false to reject it. |
hint | string | "Touch ID or enter password" | Hint under the field (mac). |
wallpaper | MediaSource | - | Replaces the default wallpaper: an image URL, an image object or an element. Text stays white, so keep it dark enough. |
children | ReactNode | - | Notifications on iOS, or controls along the bottom on mac. |
Also accepts all <section> props.