shadcn.io is not affiliated with official shadcn/ui
Researcher Publications Profile Block for React Aria
A researcher profile that draws the h-index: fourteen papers as pickable bars ranked by citations, a dashed line that climbs one citation per rank, the h-index worked out in words, the picked paper read under the chart and a BibTeX download.
Installation
Overview
Show how a body of work adds up, with this researcher publications profile for React with React Aria. A compact header holds the title and one sentence, and the hairline frame under it opens on the researcher: initials, name, role and institution, and a badge that counts the papers and their citations, worked out from the data. The chart is fourteen bars in rank order, most cited first, drawn in CSS on a fixed axis: each bar is a radio you can pick with a click or the arrow keys, its citation count printed above it and its rank under it. A dashed line climbs one citation per rank, so the h-index is where the bars stop reaching it, and the sentence under the chart writes it out ("h-index 12: 12 papers cited at least 12 times"). The paper you pick is read below with its title, venue and year, its citations, its rank and whether it counts toward the h-index, and a button downloads it as a BibTeX entry. It's built from Badge, Avatar, Button and Guides with CSS only, so the chart ports to every target as it is. The researcher, the papers and the journals are invented. For a researcher-profile service, a lab page or any profile that summarises a publication record.
FAQ
How do I fill it with my own papers?
Edit PAPERS in the Ark file, most cited first: each paper has an id, a title, a venue, a year and its citation count. The chart's top is rounded up from the biggest count, the bar heights, the dashed line, the h-index, the totals in the badge and the "In the h-index" answer are all worked out from that list, so nothing is typed twice. Keep the list sorted by citations, because a paper's place in it is its rank.
How is the h-index worked out, and what does the dashed line show?
It is the largest number h for which h papers are each cited at least h times. The block counts the papers whose citations are at least their rank. The dashed line rises by one citation for each rank, so a bar that reaches the line counts and the first bar that falls short ends the count. The papers that count are drawn a mid weight and the rest fainter; the picked paper is solid.
What does Download BibTeX do?
It writes a small .bib file for the picked paper in your browser (an article entry with the author, title, journal and year) and downloads it; nothing is uploaded. The status line says which file was made. In a real app you would build the entry from your own records, including the DOI and the volume, which the sample leaves out.
How do I use the chart with a keyboard or a screen reader?
The bars are native radios in one group named "Papers by citations, most cited first", so Tab enters at the picked paper and the arrow keys move to the next and previous rank, picking each. Each bar is named with its rank, title, year and citations ("Rank 2: Aligning clause boundaries without treebanks, 2018, cited 47 times"). The printed numbers and the dashed line are hidden from assistive technology because the names and the sentence already say them.
Is it accessible, and what about right-to-left?
The axis and the bars always run left to right, since rank is the order, and the numbers inside them keep their order; everything around the chart follows the page's direction, with names and titles isolated. Meaning never rests on shade alone: the rank is printed, the picked rank is bold and the h-index is written in words. The status line is a polite live region present from the start, and the entrance is a CSS fade that stops under reduced motion.
What stays local, and how do I wire it to real data?
Everything is typed sample data, and picking a paper only changes the page and the status line. To wire it up, load the researcher's papers and counts from your own source into PAPERS (a server component can do it), keep the helpers that rank them and find h, and link each paper to its page. Citation counts change over time, so show the date they were read.