News stackPro

Headlines as a stack with one story open at a time: its summary, picture and every outlet that ran it. The rest stay a line or two with their source and age.

Markdown

On this page

ProThe week's tableware and café trade news: one story open with its summary and every outlet that ran it.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/news-stack

Usage

tsx

import { NewsStack } from "@/components/ui/chatcn/pro/news-stack"

<NewsStack
  title="Tableware and café trade"
  items={stories}
  newSince={lastVisit}
  updatedAt="09:12"
  onRead={(story) => window.open(story.url)}
/>

Stories sort newest first and the first one opens. Opening another closes it, so the stack stays a scannable list. Stories published after newSince carry a small New mark. Past visibleItems the stack folds behind a count.

Examples

Folded, long headlines, loading, empty and error

ProAll closed and folded, a long headline from many outlets, loading, no stories and an error.

Props

Prop	Type	Notes
`items`	`NewsItem[]`	`{ id, title, source, publishedAt, summary?, image?, url?, kind?, alsoFrom? }`
`title`, `updatedAt`		Header
`now`	`Date`	Reference for relative times
`newSince`	`string \| number \| Date`	Marks newer stories
`open`, `defaultOpen`, `onOpenChange`	`string \| null`	The open story
`onRead`	`(item) => void`	Read at the source
`visibleItems`	`number`	Before the fold. Default 4
`status`, `onRetry`	`"ready" \| "loading" \| "error"`
`onExpand`	`() => void`	Full screen button in the header
`locale`, `labels`

Keyboard

Key	Action
`ArrowDown`, `ArrowUp`	Next or previous headline
`Home`, `End`	First or last headline
`Enter`, `Space`	Open or close the story

Accessibility

Each headline is a heading with a disclosure button that controls its story region.
Times are time elements with the full date. The New mark is a word, not only a dot.

Motion

The open story rises 4 px into place in 220 ms and the chevron turns. Reduced motion: no movement.