Skip to content
shadcn.io

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.

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

How does it fit on a phone?

The numbers, the citation and the button share a row, the badge drops under the citation, and the Cite button shrinks to its icon. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the list reads from the right.

What moves, and what happens with reduced motion?

The header and the list fade up once on load; the Copy Button swaps its icon for a check with a short transition, with no scaling under reduced motion. Filtering changes the rows without animation.

  • 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

    Sortable Media Mentions About

    Press and recognition

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

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

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

    Three 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

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