shadcn.io is not affiliated with official shadcn/ui
Team Member Skill Endorsements Profile Block for React
A team member profile built on skill endorsements: five skills with an Endorse toggle and the first endorsers as initials, a sort on request, her availability from typed working hours, and two current projects with days left.
Installation
Overview
Let teammates vouch for each other's strengths, with this team member profile for React with Base UI. A compact header holds the title and one outline button that sorts the skills by endorsements, and the hairline frame under it opens on the person: initials, name, role and place. The main cell lists five skills, each with a level word, the first three endorsers as a stack of initials, the count, and an Endorse Toggle that adds your name and takes it back. The list keeps its order while you endorse; it re-orders only when you press the sort, and pressing again restores the order it came in. The end cell shows whether she is at her desk, a Status dot and a word worked out from her typed hours and a typed time, then her two current projects as rows with an outline Badge for the stage and the days left to the due date. The foot, ruled by Guides, holds a polite status line and an outline Button to schedule a meeting. It's built from Toggle, Avatar, Badge, Status, Button and Guides, with a CSS entrance only. For a team directory, an internal wiki or any profile where colleagues speak for one another.
FAQ
How do I use my own skills, people and hours?
Edit the constants at the top. SKILLS lists each skill with its level, the first three endorsers and how many more there are; the count shown is those plus you. PROJECTS holds the two projects with an ISO due date, and HOURS holds her working hours for each weekday, Sunday first, with an empty pair for a day off. AS_OF and NOW are the day and time the page treats as the present, so the availability and the days left never read the clock. In a real app set both from the server and load endorsements from your API.
What stays local, and how do I make it real?
Endorsing, the sort and Schedule a meeting only change state in the page. The status line says what happened, for example Endorsed Design systems, and for the meeting Meeting noted, nothing was sent. To store an endorsement, send the skill id and the signed-in user from the toggle's change handler and keep the count the server returns; to schedule, open your calendar link from the button.
Why does the list not re-order as I endorse?
Rows that move under the pointer are hard to follow, so the order is fixed until you ask. Sort by endorsements ranks the skills by their count at that moment, with ties kept in the original order, and pressing it again goes back. Endorsing after a sort changes the counts but leaves the rows where they are.
How is she shown as available?
The block reads today's weekday from AS_OF, looks up her hours for it and compares the typed time. Inside the hours it says Available now with the closing time; before they open it says when they start; after, or on a day off, it names the next working day and time. The dot is the only colored part, and the word carries the meaning on its own.
Is it accessible?
Each Endorse toggle is named with its skill, such as Endorse Accessibility reviews, and reports whether it is pressed. The stack of initials is decorative; the count and the names of the first endorsers are read out in text. The sort button reports whether it is pressed, the lists are named, and the status line is a polite live region present from the start. Counts and names keep their order in a right-to-left layout.
How does it look on a phone?
The cells stack: the skills first, then availability, then the projects. The stacks of initials are hidden to keep each skill on two short lines, and the count still says how many people endorsed it. The sort button drops under the sentence and Schedule a meeting fills the foot.