ArticleCard

content

A rich card component for displaying article previews with cover image, title, description, tags, author info, and publish date.

ReactNext.js

Mar 15, 2025

Building with React Server Components

A deep dive into how RSC changes the way we think about data fetching and rendering.

1Installation

Install the package:

$npm install piece-ui

Import the component:

tsx

1import { ArticleCard } from "piece-ui";

2Usage

Basic usage

tsx

1import { ArticleCard } from "piece-ui";
2
3export default function Example() {
4  return (
5    <ArticleCard
6      title="Building with React Server Components"
7      description="A deep dive into how RSC changes the way we think about data fetching."
8      image="/cover.jpg"
9      tags={["React", "Next.js", "Performance"]}
10      date="March 2025"
11      href="/blog/rsc"
12    />
13  );
14}

3Props

Prop	Type	Default	Description
`title`req	`string`	—	The article title.
`description`req	`string`	—	Short preview text of the article.
`image`	`string`	—	URL of the cover image.
`tags`	`string[]`	—	Array of topic tags.
`date`	`string`	—	Publication date string.
`href`	`string`	—	Link URL for the card.

Button

ProjectCard