Stories Carousel

Galleries 219

About

Here is Stories Carousel component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Stories Carousel to your project and fits it to your theme.

Code

How Stories Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import {
  Stories,
  StoriesContent,
  Story,
  StoryAuthor,
  StoryAuthorImage,
  StoryAuthorName,
  StoryImage,
  StoryOverlay,
  StoryTitle,
} from '@/components/ui/stories-carousel';

const stories = [
  {
    id: 1,
    author: 'Alex Johnson',
    avatar:
      'https://cdn.21st.dev/assets/mirror/5e/5ec92373f165c6fad85bae85c1da338faead91ee7c04c367d5301cbf205f8e1c.jpg',
    fallback: 'AJ',
    preview:
      'https://cdn.21st.dev/assets/mirror/48/483d105c9d7d87df28938ac73fb43cfed6cced95949475d87fd0276f23eb04b0.jpg',
    title: 'Mountain Adventure',
  },
  {
    id: 2,
    author: 'Sarah Chen',
    avatar:
      'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=40&h=40&fit=crop&crop=face',
    fallback: 'SC',
    preview:
      'https://cdn.21st.dev/assets/mirror/aa/aa354d4096e5e48dcbc6a4eae8bb34f8f2ee8c0db2f15e997561da67b479b852.jpg',
    title: 'Ocean Waves',
  },
  {
    id: 3,
    author: 'Mike Rodriguez',
    avatar:
      'https://cdn.21st.dev/assets/mirror/65/65a1f730f79ece56e5da623b63a590d12c6812df91ee77ea611536ab2c6cdd3e.jpg',
    fallback: 'MR',
    preview:
      'https://cdn.21st.dev/assets/mirror/c1/c1e583cd14b38e642f23fe0b311e47334488a51edc0c6d41ec5f405091f0cf70.jpg',
    title: 'Forest Trail',
  },
  {
    id: 4,
    author: 'Emma Wilson',
    avatar:
      'https://cdn.21st.dev/assets/mirror/77/772530c45ac987aa15a72f198ae77a658751291a96789a59e7fcbcc9801d140e.jpg',
    fallback: 'EW',
    preview:
      'https://cdn.21st.dev/assets/mirror/0e/0e4b2fa1627b8eb305a0fb8ce90e746c10e88c93d7964d989662ac599c49cecd.jpg',
    title: 'City Lights',
  },
  {
    id: 5,
    author: 'David Kim',
    avatar:
      'https://cdn.21st.dev/assets/mirror/72/72de620ca3737f1dec1a5615b300327bb873c8da36b617404798f4c028b0d0d7.jpg',
    fallback: 'DK',
    preview:
      'https://cdn.21st.dev/assets/mirror/34/34785d4f43561558b50278a46889df606af3abd9ee01de3a206a23bc6522d81d.jpg',
    title: 'Desert Road',
  },
];

const Example = () => (
  <Stories>
    <StoriesContent>
      {stories.map((story) => (
        <Story className="aspect-[3/4] w-[200px]" key={story.id}>
          <StoryImage alt={story.title} src={story.preview} />
          <StoryOverlay side="top" />
          <StoryOverlay side="bottom" />
          <StoryTitle className="truncate font-medium text-sm">
            {story.title}
          </StoryTitle>
          <StoryAuthor>
            <StoryAuthorImage
              fallback={story.fallback}
              name={story.author}
              src={story.avatar}
            />
            <StoryAuthorName>{story.author}</StoryAuthorName>
          </StoryAuthor>
        </Story>
      ))}
    </StoriesContent>
  </Stories>
);

export default Example;