Community Stories
A Paragraph CMS-native editorial grid for lightweight story cards.
Community Stories renders a lightweight editorial grid with a title, description, story cards, images, story kind, and published date.
Installation
pnpm dlx shadcn@latest add paragraphcms/shadcn-registry/community-storiesnpx shadcn@latest add paragraphcms/shadcn-registry/community-storiesyarn dlx shadcn@latest add paragraphcms/shadcn-registry/community-storiesbunx --bun shadcn@latest add paragraphcms/shadcn-registry/community-storiesInstall the runtime dependencies:
pnpm add @paragraphcms/client clsx tailwind-mergenpm install @paragraphcms/client clsx tailwind-mergeyarn add @paragraphcms/client clsx tailwind-mergebun add @paragraphcms/client clsx tailwind-mergeAdd these registry files to your project:
ui/community-stories.tsxui/aspect-ratio.tsxlib/utils.ts
Keep the aliases aligned with your components.json: @/components/ui/* and @/lib/utils.
Prerequisites
You need a Paragraph CMS API key available only on the server:
PARAGRAPH_API_KEY=your_api_keyCreate a server-side Paragraph CMS client:
import { Client } from "@paragraphcms/client";
const apiKey = process.env.PARAGRAPH_API_KEY;
if (!apiKey) {
throw new Error("PARAGRAPH_API_KEY environment variable is not set");
}
export const client = new Client({ apiKey });Community Stories expects PageSummaryWithSlug[]. It uses post.heroUrl for story images, post.publishedAt for dates, and post.fields.kind or post.fields.storyKind for the story label.
Usage
Fetch story pages from Paragraph CMS and pass them to CommunityStories.
import { CommunityStories } from "@/components/ui/community-stories";
import { client } from "@/paragraph.config";
export default async function StoriesPage() {
const { data: posts, error } = await client.pages.list({
collection: "stories",
requiredSlug: true,
});
if (error) {
throw error;
}
return (
<CommunityStories
base_path="/stories"
description="Customer stories, community notes, and product updates."
posts={posts}
title="Stories"
/>
);
}By default, card links point to base_path#slug. Set fields.href or fields.url in Paragraph CMS when a story should link to a dedicated route.