shadcn.io is not affiliated with official shadcn/ui
Citable Publications About Block for React
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.
Installation
Overview
A bibliography for React with Base UI, written for Plotmark Labs, a fictional research platform for field studies. A compact header has a type filter at its end: All, Journals, Conferences and Reports, a single choice that can't be switched off. Below it, eight publications are a numbered list in citation form (authors, the period, the title, the venue in italics, volume and pages), with a badge for the type and a Cite button on each row. The button copies exactly the reference you read, an icon alone on a phone and a labelled button from md. A filter keeps each publication's own number, so a citation stays "3." whatever is shown, and an unseen copy of the full list holds the block's height. It's built from Toggle Group, Copy Button, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For about pages and research pages that want their work to be cited properly. The authors, titles and venues are example data.
FAQ
How do I change the publications?
They are PUBLICATIONS at the top of the file: authors, a period, a title, a venue, volume and pages, a type and a number. reference() builds the citation that the Cite button copies, so change the format in one place. Periods are written "Year 3" rather than a calendar year so the page never goes stale; use real years for real references.
How does the filter behave?
It is a single choice: pressing the one that is already on does nothing, so there is always a type chosen. A polite line says how many are showing, and each row keeps its number. On a phone the four options sit in a two by two shell.
What does Cite copy?
The reference in full, for example the authors, the period, the title, the venue and the pages, in one line of text. The button's name includes the title ("Cite “…”") so the rows are distinguishable, and a polite status says "Citation copied" or that the browser refused, which happens on a page that is not served over HTTPS.
Why is there a hidden copy of the list?
A filter removes rows, which would make the page shorter and pull everything below it up. An unseen copy of the whole list sits in the same grid cell, hidden from assistive technology and the keyboard (inert), so the block keeps the height of the full list. block-review reports the rows moving as a shift when you filter; it is the filter doing its job.
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
Sortable Media Mentions About
Press and recognitionAn index of eight press mentions for a PR tool as two-line rows, each with the masthead, the kind of piece, the day and the headline as a link, and the reach at its end; a Select sorts them by newest or by reach.
- Pro
Talks Accordion About
Press and recognitionThe talks of a conference app's team as accordion rows under an Upcoming and Past switch: a title, the event, the kind of talk and when, opening to the abstract, the speaker and a Slides link.
- Pro
Copyable Fact Sheet About
Press and recognitionA company fact sheet for a patient-records tool: six facts as a two-column description list in ruled rows, beside a boilerplate paragraph written from the same facts and a Copy button that puts it on the clipboard.
- Pro
Repo Cards Open Source About
Press and recognitionThree repository cards for a developer toolkit, drawn like repo headers: owner and name, a description, a language letter, rolling star counts, forks, contributor initials and latest release, with a used-by line.
- Pro
Changelog Summary About
TimelinesA release summary for a release-notes tool: a segmented bar of what changed since launch (added, improved, fixed) with counts, a filter by type and the latest four releases as rows.