Editorial Feed

A rich editorial layout with margin vote annotations, vertical rules, and stacked feed items. Inspired by blog and editorial design.

Preview

24↑ 3↓

Add keyboard shortcuts for common actions

Planned#UX#Feature·7 comments3 days ago

41↑ 2↓

Dark mode support for the dashboard

In Progress#Design·12 comments1 day ago

8↑ 1↓

Export feedback data as CSV

Under Review#Data·3 comments5 days ago

Installation

npx shadcn add https://www.reflet.app/r/feedback-editorial-feed.json

Usage

import {
  EditorialFeed,
  EditorialFeedComments,
  EditorialFeedContent,
  EditorialFeedItem,
  EditorialFeedMeta,
  EditorialFeedRule,
  EditorialFeedStatus,
  EditorialFeedTag,
  EditorialFeedTime,
  EditorialFeedTitle,
  EditorialFeedVote,
} from "@/components/ui/feedback-editorial-feed";

<EditorialFeed>
  <EditorialFeedItem defaultUpvotes={24} defaultDownvotes={3}>
    <EditorialFeedVote />
    <EditorialFeedRule />
    <EditorialFeedContent>
      <EditorialFeedTitle>
        Add keyboard shortcuts for common actions
      </EditorialFeedTitle>
      <EditorialFeedMeta>
        <EditorialFeedStatus color="blue">Planned</EditorialFeedStatus>
        <EditorialFeedTag>UX</EditorialFeedTag>
        <EditorialFeedTag>Feature</EditorialFeedTag>
        <EditorialFeedComments count={7} />
        <EditorialFeedTime>3 days ago</EditorialFeedTime>
      </EditorialFeedMeta>
    </EditorialFeedContent>
  </EditorialFeedItem>
  <EditorialFeedItem defaultUpvotes={41} defaultDownvotes={2}>
    <EditorialFeedVote />
    <EditorialFeedRule />
    <EditorialFeedContent>
      <EditorialFeedTitle>
        Dark mode support for the dashboard
      </EditorialFeedTitle>
      <EditorialFeedMeta>
        <EditorialFeedStatus color="amber">In Progress</EditorialFeedStatus>
        <EditorialFeedTag>Design</EditorialFeedTag>
        <EditorialFeedComments count={12} />
        <EditorialFeedTime>1 day ago</EditorialFeedTime>
      </EditorialFeedMeta>
    </EditorialFeedContent>
  </EditorialFeedItem>
  <EditorialFeedItem defaultUpvotes={8} defaultDownvotes={1}>
    <EditorialFeedVote />
    <EditorialFeedRule />
    <EditorialFeedContent>
      <EditorialFeedTitle>Export feedback data as CSV</EditorialFeedTitle>
      <EditorialFeedMeta>
        <EditorialFeedStatus color="purple">Under Review</EditorialFeedStatus>
        <EditorialFeedTag>Data</EditorialFeedTag>
        <EditorialFeedComments count={3} />
        <EditorialFeedTime>5 days ago</EditorialFeedTime>
      </EditorialFeedMeta>
    </EditorialFeedContent>
  </EditorialFeedItem>
</EditorialFeed>

API Reference

`EditorialFeed`

List container with vertical dividers between items.

`EditorialFeedItem`

Individual feed item. Provides vote context for child sub-components.

Prop	Type	Description
`defaultUpvotes`	`number`	Initial upvote count. Defaults to 0.
`defaultDownvotes`	`number`	Initial downvote count. Defaults to 0.
`onVoteChange`	`(upvotes, downvotes) => void`	Callback fired when the vote changes.

`EditorialFeedVote`

Absolute-positioned vote annotation in the left margin with animated up/down buttons.

`EditorialFeedRule`

Thin vertical rule separating the vote margin from the content.

`EditorialFeedContent`

Wrapper for the title and meta content area.

`EditorialFeedTitle`

Editorial-style heading with display font.

`EditorialFeedMeta`

Flex row for status, tags, comments, and time metadata.

`EditorialFeedStatus`

Colored status badge pill.

Prop	Type	Description
`color`	`StatusColor`	Color key: purple, green, blue, red, amber, pink, or gray. Defaults to "gray".

`EditorialFeedTag`

Italic tag prefixed with #.

`EditorialFeedComments`

Comment count with dot separator.

Prop	Type	Description
`count`*	`number`	Number of comments.

`EditorialFeedTime`

Italic timestamp text.

All sub-components also accept className and children props unless noted otherwise.