Medical Specialists Directory

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.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/health/health8.tsx instead.

Usage

The file also exports health8Demo, 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 { Health8, health8Demo } from "@/components/blocks/health/health8";

export default function Page() {
  return <Health8 {...health8Demo} />;
}

Props

Types

type Specialist = {
  name: string;
  specialty: string;
  rating: number;
  reviewCount: number;
  busy: boolean;
  availabilityLabel: string;
  nextSlot: string;
  avatar?: { src: string; alt: string };
  href?: string;
};

Behavior notes

• busy is a static boolean that only switches the availability badge's text color (muted vs primary); availabilityLabel and nextSlot are separate static strings, not derived from busy or from a real schedule.
• rating is formatted with toFixed(1) so it always shows one decimal place; the star icon next to it is a fixed decorative icon, not driven by the rating value.
• Each specialist's avatar falls back to initials when avatar is omitted (two of the six demo specialists intentionally omit it to show both states).
• Each card's "View profile" button becomes a real link via Button's render prop only when href is set.