shadcn.io is not affiliated with official shadcn/ui
Paper Cards Research Awards Block for React
Six award-winning papers for a lab notebook as cards on shared hairlines: venue, title, year, the award and a mini column chart of citations per year, with papers, citations and h-index derived in the header.
Installation
Overview
A set of paper cards for React with Base UI. A start-aligned header has a description list at its end with three figures derived from the typed list: the papers, the citations and the h-index. Under it a band of six cards shares its hairlines and ends the block. Each card is an article with the venue and volume, the year, the paper's title as a heading, the award it won, and at the foot the number of times it has been cited with a small column chart of citations in each year from 2021 to 2025, all on one scale. The chart is an SVG with a text summary; it is hidden below sm, where the number stays. Two columns from md, three from lg, one on a phone. The page's rails and top rule come from the Guides spine. It's built from Guides, Badge, inline SVG and your theme's tokens. The Briarton Quarterly, Labbook and the papers are made up for the example.
FAQ
How do I change the papers?
Edit PAPERS at the top of the file: each has a title, a volume, the fixed publication year, the award and cited, the citations in each year of YEARS, oldest first. The totals on the cards, the header's papers and citations, the h-index and the chart heights are all computed from that.
How is the h-index computed?
The totals are sorted from most to least cited, and the h-index is the number of papers whose total is at least their position in that order: with totals of 214, 156, 97, 61, 38 and 5 it is 5, because the sixth paper has fewer than 6 citations. It is a plain helper at the top of the file.
How does the chart read for a screen reader, and why is it hidden on a phone?
The chart is an SVG named by its title, which lists the citations for each year, and the total is in the text beside it. Below sm the chart is hidden to keep the card short and the number stays. The columns share one scale, so a taller column in one card means more citations than a shorter one in another.
Related
- Pro
Patent Steps Awards
TimelinesThree patents as full-width bands, each with its title, register number and jurisdictions as code badges and a read-only Steps stepper at its current step, under a header that counts how many are granted and pending.
- Pro
Prize Purse Startup Awards
Lists and tablesA prize-purse ledger for a founders' toolkit: one cell for each prize with the prize in large type, the competition, where the team placed and a derived top share, and the prizes summed at the foot.
- Pro
Radar Scorecard Awards
One featured awardOne award scored in depth for an application-performance monitor: a radar chart of five criteria beside the same scores as a numbered list with bars, a derived total and the lead judge's comment.
- Pro
Masthead Featured Article Awards
Press and quotesA feature article about a newsletter platform set as a clipping: headline, byline, an excerpt with a drop cap and a link, beside a drawn masthead and a description list of publication, section, date and reading time.
- Pro
Annual Report Awards
Themed formatsA printed recognition report as a framed page for a farm-management suite: a drawn laurel cover at the start, a Highlights description list with dotted leaders and a four-segment quarter bar at the end.
- Pro
Asymmetric Mosaic Awards
Cards and gridsSeven awards for a type marketplace on a 4-column hairline grid with different spans: a 2 by 2 lead with a large drawn trophy, two 2 by 1 runners-up and four small cells.