Team directory.
Search, sort and invite people into a sample workspace.
PEOPLE & ACCESS
Better, together.
4 people in this sample workspace.
| Status | ||
|---|---|---|
MC Maya Chenmaya@example.com | Admin | Active |
OR Oliver Reedoliver@example.com | Editor | Active |
SR Sam Riverasam@example.com | Editor | Active |
AB Avery Brooksavery@example.com | Viewer | Active |
Live interface · sample data · state resets on reload
GET STARTED
The source is yours.
npx shadcn@latest add https://ui.bld8.dev/r/team.jsonInstall into an existing application, or download the complete starter below.
Download the starter, unzip it and run the commands below. It includes a Next.js app, both BLD8 packages and their editable source. No BLD8 npm installation is needed.
npm install
npm run devOpen http://localhost:3000. Node 22 and React 19 are used. Import TeamDirectory from @bld8/blocks in your own composition.
NOTES TO SELF
A clear starting point.
Pass initialMembers for your own rows. Invitations add a local record, reject duplicate email addresses and never send an email.
Both collections use the MIT licence. Personal and commercial use are allowed; keep the licence notice when sharing the code.
About the collections Source manifest