Index Header

Component

About

A page header for a content index (research, news, blog) that pairs a title and lede with a topic-filter nav, marking the active topic for assistive tech.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Index Header to your project and fits it to your theme.

Code

How Index Header is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import IndexHeader from "@/components/ui/index-header";

export default function IndexHeaderDemo() {
  return (
    <div
      style={{
        background: "var(--surface-base)",
        color: "var(--ink-primary)",
        padding: "48px",
      }}
    >
      <IndexHeader
        title="Research"
        lede="Every claim on this page says what it is measured over."
        topicsLabel="Topics"
        topics={[
          { label: "All", href: "#", current: true },
          { label: "Hiring", href: "#" },
          { label: "Evaluation", href: "#" },
          { label: "Fairness", href: "#" },
          { label: "Methodology", href: "#" },
        ]}
      />
    </div>
  );
}