Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Staff ID Badge Profile Block for React Aria

A staff ID badge you can turn over: the front has initials, name, title, department, office and a copyable employee number; the back has a contact QR code, the expiry and where to return it.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Put a staff ID on the phone and let it be checked at the door, with this badge profile for React with React Aria. Inside a hairline frame with a plus mark on each corner, a Segment Group chooses Front or Back, and the badge sits on a quiet stage in a card of fixed size. The front has initials, the name and title, chips for department and office, and the employee number in monospace beside a Copy Button that really copies it. The back has a QR Code holding the person's contact details, a line to scan it, the day the badge expires with the days to go counted from a fixed date, and where to return it if found. Both sides sit in one place, so turning the badge over never moves the panel. The foot, ruled by Guides, holds a status line beside a Shine Button that asks for a replacement and says nothing was sent. The person and the company are invented. For a digital-badge app, a visitor pass or any ID that lives on a screen.

FAQ

How do I change the person, the code and the dates?

Edit PERSON and CONTACT at the top. The QR code encodes the CONTACT text, so change it to a vCard or a link your scanner understands. VALID_UNTIL is the expiry; the days left are counted from the fixed AS_OF date, so replace that with the real clock in your app.

What does Copy do?

It puts the employee number on the clipboard and the status line says Copied, followed by the number. If the clipboard refuses, for example on a page not served over HTTPS, the line says so instead. This is the one thing the block does for real.

What stays local, and how do I make it real?

The side choice and the replacement request. Request a replacement says Requested in this demo, nothing sent. To make it real, post the employee number to your own endpoint from the button's handler and show its answer in the same line. The badge is a sample record and issues nothing.

Why does the badge not move when I turn it?

Both sides are in the same grid cell with the side that is not shown hidden, unreachable by keyboard and removed from the reading order, and they cross-fade. The card has a fixed minimum height, so neither side can change the panel. With reduced motion the change is instant.

Is it accessible?

The side group is named, the hidden side is inert so Tab never lands on it, and the QR code is an image with a text name saying whose details it holds. The expiry is a real time element. The status line is a polite live region present from the start.

How does it look on a phone?

The badge is 20rem wide and shrinks to the screen if it must; the group sits at the end of the first band, and the foot stays pinned to the bottom of the screen. The employee number and the dates keep their order in a right-to-left layout.

All 100 profile blocks