Stories Carousel

Component 17

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,
} from '@/components/ui/stories-carousel';

const stories = [
  {
    id: 1,
    author: 'Hayden Bleasel',
    avatar: 'https://cdn.21st.dev/assets/mirror/76/760921add96cda047fb9d92050b00b3697e3f9436fb8b4276c4303623dad9188.jpg',
    fallback: 'HB',
  },
  {
    id: 2,
    author: 'shadcn',
    avatar: 'https://cdn.21st.dev/assets/mirror/51/513d06f542692036ff0bb17938f04b3efd60567ba2cae08049469d21f18e0524.jpg',
    fallback: 'CN',
  },
  {
    id: 3,
    author: 'Lee Robinson',
    avatar: 'https://cdn.21st.dev/assets/mirror/b8/b881fc6e5d91d95f912abd2f45508332c7a398d9dd53c136c6c0a2d500c8fc7e.png',
    fallback: 'LR',
  },
  {
    id: 4,
    author: 'Serafim',
    avatar: 'https://cdn.21st.dev/assets/mirror/bc/bc101e2880df0fbc2fc8a6e3528c23ec6762cf97b25ef1ec3e381da80017db95.jpg',
    fallback: 'SC',
  },
];

const Example = () => (
  <div className="w-full max-w-4xl">
    <Stories>
      <StoriesContent className="justify-center">
        {stories.map((story) => (
          <Story className="aspect-square w-20 rounded-full p-0" key={story.id}>
            <StoryAuthor className="p-0">
              <span
                aria-hidden="true"
                className='inline-flex size-full rounded-full bg-gradient-to-tr from-[#f9ce34] via-[#ee2a7b] to-[#6228d7] p-0.5'
              >
                <span className="inline-flex size-full rounded-full bg-white p-0.5">
                  <StoryAuthorImage
                    className="size-full"
                    fallback={story.fallback}
                    src={story.avatar}
                  />
                </span>
              </span>
            </StoryAuthor>
          </Story>
        ))}
      </StoriesContent>
    </Stories>
  </div>
);

export default Example;