shadcn.io is not affiliated with official shadcn/ui
Research Papers Team Block for React
A research lab's five papers as rows rail to rail: venue and year, title, authors, a citation bar scaled to the most cited paper, a Copy citation button and an abstract in an accordion.
Installation
Overview
A publications section for React with Base UI, written for Ravensworth, a fictional machine-learning research lab. A header says how many papers there are and what Copy citation does. Under it, five papers share hairlines rail to rail and the last ends the block. Each row has the venue and year, the title, the authors (an initials avatar stack and their surnames), a Copy citation button that puts a reference on the clipboard, a citation bar scaled to the most cited paper with the count beside it, and an Abstract accordion that opens the abstract in place. After a copy the button reads "Citation copied" for a moment and a polite status line says which paper. The papers, venues and citation counts are made up for the example. It is built from Accordion, Copy Button, Avatar and Guides with your theme's tokens.
FAQ
How do I change the papers?
Edit PAPERS at the top of the file. A paper has a title, a venue, a year, its authors, a citation count and an abstract. The bar lengths are worked out from the most cited paper, and the copied reference ("Okafor, A. Raman, P. Watanabe, J. (2025). Title. Venue.") is built from the same fields by citationOf: change that function if your house style differs. The venues and counts here are example data, not real publications.
How does Copy citation work?
It uses the browser's clipboard. The button keeps one width for both labels, and a polite status line says "Citation for … copied" or "Couldn't copy" if the clipboard refuses (no permission, or a page not served over HTTPS). The button is named with the paper's title, so several buttons on one page stay distinct.
How are the citation bars read?
The count is text beside the bar ("Cited 311"). The bar repeats it as a drawing and is hidden from assistive technology so it isn't announced twice; it is drawn left to right because it measures a quantity.
How do the abstracts work with a keyboard and a screen reader?
Each paper has its own accordion with one item. The trigger is a button inside a heading, named "Abstract of" and the title, with its state announced; Enter or Space opens it and the plus becomes a minus. Each paper's accordion is separate, so opening one never closes another. A closed abstract is left out of the page; it is added when the accordion opens.
Related
- Pro
Paper Viewer About
Press and recognitionA paper viewer for a lab data platform: a vertical list of five papers at the start and the chosen paper drawn as a framed page at the end, with its venue, title, authors, abstract and one key figure.
- Pro
Citable Publications About
Press and recognitionA bibliography for a research platform: eight publications as a numbered list in citation form, a type filter, and a Cite button on each row that copies the reference.
- Pro
Speaking Events Team
Interests and clubsUpcoming and Past tabs over talk rows led by a calendar tile, each opening to topics, an abstract and, for past talks, a Slides link; Upcoming ends in an invitation to book a speaker and Past is a two-column archive.
- Pro
Podcasts Team
Interests and clubsA podcast host's own show: the latest episode in a framed cell with a drawn waveform and a Listen link, over earlier episodes as rows with a length bar and a Newest or Longest switch.
- ###Pro
Copy Link Changelog
Votes and sharingThree docs-host releases, each its own cell with an anchor and a Copy link button that puts that release's permalink on the clipboard and says so, with a :target ring on the one the address points at.
- Pro
Book Club Team
Interests and clubsA split showing a bookshop's current club read, with a chapter progress bar, the members reading along and the next meeting, beside a drawn cover plate, over a band that opens the past reads.