shadcn.io is not affiliated with official shadcn/ui
Research Papers Team Block for Vue
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 Vue with Ark 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.
The abstracts are kept in the page when closed (lazyMount and unmountOnExit are off), so the text is there for search and find-in-page.