Four ways to present a post — editorial cover, compact list, featured series and author-led quote — each with its own motion moment, from layered parallax to a gliding row highlight.
blogarticlepostcardjournaleditorialreading timebookmarkseries
Editorial
editorial.tsxCover card with a drawn type specimen whose layers drift under the pointer, plus category, excerpt and byline.
$npx shadcn@latest add @geturui/blog-cards-editorial
| Prop | Type | Default | Description |
|---|---|---|---|
category / title / excerpt | string | — | Post content. |
author / monogram | string | — | Byline and avatar initials (derived from author when omitted). |
date | string | "2026-09-28" | ISO date, formatted as Sep 28, 2026. |
readingMinutes | number | 8 | Reading time in minutes. |
issue | string | "Issue 14" | Label printed on the cover. |
href / onOpen | string / () => void | — | Destination and click handler for the card. |
className | string | — | Extra classes on the root element. |
Compact list
compact-list.tsxList of posts with reading-progress rings, a highlight that glides between rows and arrow-key navigation.
$npx shadcn@latest add @geturui/blog-cards-compact-list
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | "Latest from the journal" | Title above the list. |
posts | CompactPost[] | — | { id, title, category, date, readingMinutes, progress?, href? } per row. |
allHref | string | "#" | Link for View all. |
onSelect | (post: CompactPost) => void | — | Called when a row is opened. |
className | string | — | Extra classes on the root element. |
Featured series
featured-split.tsxSplit card for a multi-part series: step through parts while the art and copy crossfade in the direction of travel.
$npx shadcn@latest add @geturui/blog-cards-featured-split
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow / series | string | — | Labels above the part title. |
parts | SeriesPart[] | — | { title, excerpt, readingMinutes, href? } per part. |
defaultIndex | number | 1 | Part shown first. |
onRead | (part: SeriesPart, index: number) => void | — | Called by the Read button. |
className | string | — | Extra classes on the root element. |
Install the whole set
Installs every blog cards variant at once. Each section above has its own command for a single variant.
$npx shadcn@latest add @geturui/blog-cards
Accessibility
- Cards are real links or contain one clear link, with a visible focus ring; drawn covers are hidden from assistive tech.
- Toggles such as bookmark use aria-pressed, counts update in place and a status message confirms copied links.
- Parallax, gliding highlights and directional slides fall back to fades with reduced motion.