Editorial Feed
A stacked, editorial list of feedback with votes set in the margin and a vertical rule beside each item.
Preview
Installation
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="orange">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>Features
- Stacked list layout with votes set in the margin, like annotations.
- A vertical rule separates the vote column from the content.
- Each item keeps its own vote state, uncontrolled or controlled.
API reference
EditorialFeed
List container for feed items.
EditorialFeedItem
One feedback row. Holds that item’s vote state and shares it with EditorialFeedVote.
EditorialFeedVote
Margin vote column with up and down buttons. Reads vote state from the item.
EditorialFeedRule
Vertical rule between the vote column and the content.
EditorialFeedContent
Content column.
EditorialFeedTitle
Item title.
EditorialFeedMeta
Row for status, tags, comments and time.
EditorialFeedTag
Plain tag label.
EditorialFeedTime
Relative time label.
Every subcomponent also accepts className, merged with its default classes.