Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Citable Publications About Block for Svelte

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 Svelte with Ark 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.