BrowserMoonDashboard templatesPeople directory template for HR SaaS apps

People directory template for HR SaaS apps

People directory template for HR SaaS, people operations tools, and internal team platforms. Use it as the screen where someone finds a colleague and everything about them. Use this AI template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.

DashboardSaaS842 copies

About this vibe coding template

People directory template for HR SaaS products that hold a company's team. It fits HR software, people operations platforms, HRIS products, internal tools, and any product where employees look each other up. Use it as the directory at the centre of the product. A directory is the screen new joiners open first, so it sets what they think of the tool before anything else does. Minimal design. It works in Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, and Cursor.

Build a full SaaS app or admin dashboard with this template design

A SaaS app or admin dashboard is dozens of screens sharing one shell, so one dashboard template can set the standard for the navigation, the spacing, and the card design on every screen after it. Copy the template, paste it into Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, or Cursor, and send this alongside it.

Paste into Claude Code, Replit, Lovable, Bolt, or Cursor

Common questions about this template

What is a people directory dashboard template?

A people directory is the main employee list view in an HR SaaS. This template shows a filterable table with name, department, role, location, start date, and status, with a profile sidebar that opens on row click.

What does the employee profile sidebar show in this HR template?

Name, department, role, location, manager, and start date, with quick links to documents and performance reviews. Paste it into a vibe coding tool to add or remove fields, such as pronouns, team, or compensation band.

Can I add an org chart view to this people directory template?

Yes. The sidebar navigation includes an org chart link. Paste the template into Claude Code, Replit, Bolt, or Lovable and ask the tool to build the org chart view as a separate panel or page using the existing team hierarchy data.

Which vibe coding tools work with this people directory template?

Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, and Cursor. Paste it in and describe your HR data fields, department list, and employee lifecycle stages to build a working people directory.

Use this AI coding template for

  • ·People directory dashboard template for an HR or people operations SaaS
  • ·Employee table template with department chips and profile sidebar
  • ·HR workspace dashboard for vibe coding a team directory or HRIS tool
  • ·HTML people directory template for Claude Code, Replit, or Bolt

Works with every vibe coding tool