React pin login screenPIN Login Screen for an Employee Time Clock
React pin login screen: a PIN login page for shift and workforce apps, drawn as the time clock by the door: pick your name, key in a PIN, and your time card drops into the clock and is stamped with the real time.
Features
- On warm near-black, a wall time clock drawn in code with the live time in amber on its display
- A printed time card per person: name and role, the last four days' punches, and today's row waiting
- A right PIN drops the card into the clock, the body jolts, and the card comes back with IN and the real time printed in blue-black ink
- A wrong PIN pushes the card back out with a shake, clears the field and says why
- A keypad of large keys for a shared tablet over a real password field, so the keyboard and screen readers work
- Takes an async onPunch; dates come from the visitor's clock after the page loads, and motion is skipped for reduced motion
Best for: Scheduling, time-tracking and point-of-sale products whose staff sign in on a shared tablet with a name and a PIN.
Installation
npm install motion lucide-react clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| clockBrand | ReactNode | - | The maker's name on the clock's body. |
| title | string | - | The headline. |
| description | string | - | The line under the headline. |
| people | ClockPerson[] | - | Who can clock in: id, name, role, photo and their last punches. |
| labels | object | - | The picker and PIN labels, the card's headings, the error and an optional hint. |
| success | { title; description; action: { label; href } } | - | What the page says once stamped; {name} and {time} are filled in. |
| onPunch | ({ personId, pin }) => Promise<boolean> | - | Checks the PIN: true stamps the card. |
| className | string | - | Classes on the page. |
FAQ
Is the PIN Login Screen for an Employee Time Clock free to use?
Yes. PIN Login Screen for an Employee Time Clock is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does PIN Login Screen for an Employee Time Clock work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use PIN Login Screen for an Employee Time Clock in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does PIN Login Screen for an Employee Time Clock need installed?
motion, lucide-react, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is PIN Login Screen for an Employee Time Clock accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.