Story Cards

A responsive, accessible story cards carousel for React applications built with Tailwind CSS and Framer Motion.

What's happening

Discover the latest stories.

We survived another year of meetings, deadlines, bugs, and pretending everything was part of the plan.

We survived another year of meetings, deadlines, bugs, and pretending everything was part of the plan.

Add the component directly to your repository using shadcn CLI:

npx shadcn@latest add Surajmaurya1/easyui/story-card

Prop	Type	Default	Description
cards	StoryCard[]	undefined	Array of story cards containing title, image, description, and optional link information
initialIndex	number	0	Index of the story displayed initially
loop	boolean	true	Enables endless circular scrolling through the cards
enableWheelScroll	boolean	true	Allows trackpad or mouse wheel gestures to scroll through cards
autoPlay	boolean	false	Automatically advances through the story cards
autoPlayInterval	number	5000	Time in milliseconds between automatic story transitions
showNavigation	boolean	true	Controls whether previous and next navigation buttons are displayed
title	string	"What's happening"	Custom title heading for the story cards section
subtitle	string	"Discover the latest stories."	Custom subtitle for the story cards section
className	string	undefined	Optional custom Tailwind styling for the component wrapper