shadcn.io is not affiliated with official shadcn/ui
Employee Directory Dashboard Block for React
A directory of twelve people as cards with a search, a department filter and a group-by, checkboxes to pick people, Copy emails to the clipboard, a real CSV export and a side cell with manager, time zone and direct reports.
Installation
Overview
Pick people and act on them, with this employee directory for React with Base UI. A hairline frame with a plus mark on each corner holds twelve Rosterlane people as cards in a scroll region of fixed height: initials, a name, a role, a department chip, a city and a presence word. A toolbar band has a Input search, a Native Select for the department and a Segment Group that groups the cards by nothing, department or location. Each card has a Checkbox; the bar above the cards says how many are selected, copies their emails to the clipboard and exports a CSV file built in the browser with the block's one Shine Button. Pressing a name opens that person in the side cell with their city, time zone, presence, manager and direct reports, worked out from the manager links. It's built from Checkbox, Input, Native Select, Segment Group, Download Trigger, Button, Avatar, Badge, Empty and Guides. For HR tools and company intranets.
FAQ
How do I fill it with my people?
Edit PEOPLE: an id, a name, a role, a department, a city, a time-zone offset, a presence word and a manager, which is the id of another person or an empty string. Direct reports, the manager line, the department filter and the group headings are all worked out from those fields. EMAIL_HOST is the domain the addresses are built on.
How do selecting, copying and exporting work?
Ticking a card adds that person to the selection, and the selection stays when you change the filter: the status line says how many are selected and how many the filter is hiding. Copy emails puts the addresses of the selected people on the clipboard, separated by commas. Export CSV saves a file with a name, email, role, department, location and time zone for each selected person, in the order of the directory. Both buttons wait when nothing is selected.
Is the CSV safe to open in a spreadsheet?
Yes. Every cell that holds a comma, a quote or a line break is quoted, and a cell that starts with an equals sign, a plus, a minus or an at sign gets a leading apostrophe so a spreadsheet reads it as text and not a formula. The file is built in the page when you press the button, and nothing is uploaded.
What stays local, and how do I wire it for real?
The people and their presence are a typed snapshot from a fixed time, and nothing is synced. Copying and exporting are the only real browser effects. To make it real, load people from your directory, refresh presence from your chat or HR system, and decide which fields an export may contain.
How do I use it with a keyboard?
Every checkbox, name and button is a tab stop. The card list is a scroll region you can focus and scroll with the arrow keys, and the group-by control moves between its three options with the arrow keys. Pressing a name opens the person in the side cell without moving focus.