Talent Sourcing

Dashboard6: Talent Sourcing

A recruiting dashboard for staffing and talent sourcing: a project detail view with a candidate pipeline, live-filtering toolbar, and a responsive grid of talent cards. It pairs a collapsible sidebar and action topbar with a stat strip, pipeline sub-tabs, and wishlist / invite controls, making it a ready-made ATS UI for any Next.js / React hiring dashboard built on shadcn/ui.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/dashboard6?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/dashboard6?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/dashboard6.tsx, the Beste components it composes (sidebar-nav, user-menu, notifications-menu, and talent-card), and the shadcn/ui dependencies they need (button, badge, avatar, input, switch, dropdown-menu).

Quick start

The installed file exports dashboard6Demo alongside the block: the exact prop behind the preview above. Spread it to get the full dashboard in one line. It is a full-height layout (h-screen), so give it the whole viewport rather than nesting it inside a constrained container.

import { Dashboard6, dashboard6Demo } from "@/components/beste/block/dashboard6";

export default function Page() {
  return <Dashboard6 {...dashboard6Demo} />;
}

Props

Every prop is optional. Omit any and the block falls back to its built-in demo data, so <Dashboard6 /> renders a complete, populated recruiting dashboard out of the box. Pass just the props you want to override.

The block-local data types:

type DashboardUser = {
  name: string;
  email: string;
  avatar: string; // image URL, rendered with a plain <img>
};

type StatItem = { value: string; label: string }; // value pre-formatted, e.g. "2 of 3"
type ProjectMetaItem = { label: string; value: string };

type Talent = {
  name: string;
  avatar?: string;          // image URL; falls back to initials
  verified?: boolean;       // shows a verified check
  rating?: number;          // omit to show the "New" label
  reviews?: number;
  location: string;
  distance: string;
  rate: string;             // pre-formatted day rate, e.g. "$142"
  availability?: string;    // muted availability line under the actions
  wishlisted?: boolean;     // seeds the card's wishlist toggle
  invited?: boolean;        // seeds the card's invite toggle
  recentlyActive?: boolean; // matched by the "Recently active" filter
};

The remaining props reuse the interfaces exported by the composed Beste components:

// from sidebar-nav
type SidebarNavGroup = {
  label?: string; // muted uppercase group heading (hidden when collapsed)
  items: {
    id: string;
    label: string;
    icon?: LucideIcon;
    badge?: string | number; // small trailing count/tag
    href?: string;           // renders an <a> instead of a <button>
  }[];
};

// from user-menu
type UserMenuItem = {
  id: string;
  label: string;
  icon?: LucideIcon;
  destructive?: boolean; // red row with a separator above it
};

// from notifications-menu
type NotificationItem = {
  id: string;
  title: string;
  description?: string;
  time: string;
  icon?: LucideIcon;
  unread?: boolean;
};

Still internal

A few structural bits stay as constants in the installed file — edit them in place:

• subTabs — the pipeline sub-tab definitions ({ label, count? }) used for the tab strip layout.
• The project header badges (Event production, Active, Hired 2 of 3) and the topbar action buttons (Back to projects, Team, Project) are inline in the JSX.

Components

This block composes these Beste UI components (all installed for you):

• talent-card — the candidate card with avatar, rating, location, rate, and wishlist / invite toggles.
• sidebar-nav — the collapsible left navigation with grouped items and a brand header.
• user-menu — the avatar dropdown in the topbar, rendered in compact mode.
• notifications-menu — the bell dropdown fed by demoNotifications.

Behavior notes

• The Recently active toggle and the Verified only checkbox (in the Filters menu) live-filter the talent grid; both narrow at once, and the Filters button shows a dot while either is on. The candidate count above the grid updates to match.
• The Filters menu also carries its own Recently active checkbox, kept in sync with the toolbar toggle since both write the same state.
• The pipeline sub-tabs (Candidates, Screening, Interviews, Offers, Contracts, Onboarding) are clickable and track the active tab; the grid content itself does not change per tab.
• The topbar sidebar toggle collapses the sidebar on desktop; on mobile (below md) a panel button opens the sidebar in a slide-out sheet, which closes on navigation.
• Each talent card manages its own wishlist and invite state, seeded from defaultWishlisted / defaultInvited per candidate.
• The search input is presentational (it does not filter the grid).
• The project actions menu (Duplicate, Share, Archive, Delete) is a wired dropdown but its items have no handlers.

Requirements

• Next.js App Router. Rendered as a client component ("use client"), so it composes into any page.
• Full-height layout: the root is h-screen w-full, so mount it as a page-level view, not inside a card.
• Candidate avatars render with a plain <img> (via talent-card), so no next.config images.remotePatterns setup is needed for remote hosts.