Talent Sourcing
Recruiting project detail dashboard: a project header with client and status, a five-up stat strip, pipeline sub-tabs that filter a 9-up candidate grid by stage, a live name search, a recently-active toggle, and per-card wishlist and invite toggle buttons.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge, avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/talent-sourcing.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/dashboard/dashboard6.tsx instead.
Usage
The file also exports dashboard6Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Dashboard6, dashboard6Demo } from "@/components/blocks/dashboard/dashboard6"; export default function Page() { return <Dashboard6 {...dashboard6Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| navItems | NavItem[] | none | Sidebar links; icons are assigned by position, not by prop. |
| projectActionsItems | string[] | ["Duplicate project", "Archive project", "Share report"] | Labels listed in the project actions dropdown. |
| project | Project | none | Title, client, status pill, and start date shown in the header. |
| stats | StatItem[] | none | Five stat tiles below the project header. |
| candidates | Candidate[] | none | Full candidate list; the pipeline tabs, search, and activity toggle all filter this same array client-side. |
| className | string | none | Extra classes for the outer section element. |
Types
type NavItem = { label: string; href: string; active?: boolean }; type Project = { title: string; client: string; status: "Active" | "On hold" | "Closed"; startDate: string }; type StatItem = { label: string; value: string; helper?: string }; type Candidate = { id: string; name: string; role: string; location: string; skills: string[]; stage: "Sourced" | "Screening" | "Interviewing" | "Offer"; recentlyActive: boolean; avatar?: { src: string; alt: string }; };
Behavior notes
- The pipeline sub-tabs (All/Sourced/Screening/Interviewing/Offer) are real: they filter the candidate grid by each candidate's stage field via local state.
- The candidate search input live-filters by name as you type; it composes with the stage tab and the Recently active toggle rather than replacing them.
- The Recently active toggle is a genuine boolean filter against each candidate's recentlyActive field, not a decorative pressed state.
- Each card's star (wishlist) and Invite buttons hold real independent per-card state; toggling one candidate's Invite button does not affect any other card.
- The project actions menu (header) and the Filters menu (toolbar) are real open/close toggles for their dropdown panels, but their contents are decorative and do not change what's displayed in the grid.
- A candidate with no avatar falls back to initials built from their name, same as the about-category team grid.
- When every active filter combination excludes all candidates, the grid is replaced with a single empty-state message rather than rendering blank.
More Dashboard Blocks
View all →admin-shell
Admin Shell
Full admin dashboard frame with a collapsible icon sidebar, command-palette trigger, KPI row, and recent-orders table.
customers-table
Customers Table
Sortable, searchable customers table with row selection, pagination, and a per-row action menu.
commerce-analytics
Commerce Analytics
E-commerce analytics dashboard with a four-up KPI row, net-profit area chart, repeat-rate gauge, weekday bar chart, and a best-sellers table.
project-workspace
Project Workspace
Project-management dashboard with a highlighted stats row, weekly hours chart, meeting reminder, team list, progress gauge, and a focus tracker.
booking-workspace
Booking Workspace
Split hotel booking dashboard with tabbed overview, active booking cards, room timelines, and a month calendar with a day agenda.
traffic-analytics
Traffic Analytics
Web analytics console with a live-visitors strip, an hourly sessions area chart, a channel radar chart, a new-vs-returning line chart, and a sortable top-pages table.