Skip to content
shadcn.io

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

How does it fit on a phone?

Each row stacks: venue, title, the surnames (the avatar stack hides below sm), the Copy citation button and the bar, then the Abstract trigger. Nothing scrolls sideways at 320 pixels.

Does it work right to left?

Yes. The row follows the page direction; the year and the citation count are wrapped in bdi, and the bar is drawn left to right in a dir="ltr" box.

  • Pro

    Paper Viewer About

    Press and recognition

    A 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 recognition

    A 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 clubs

    Upcoming 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 clubs

    A 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 sharing

    Three 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 clubs

    A 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.