'use client';
import {
Stories,
StoriesContent,
Story,
StoryAuthor,
StoryAuthorImage,
StoryAuthorName,
StoryOverlay,
StoryVideo,
} from '@/components/ui/stories-carousel';
const stories = [
{
id: 1,
author: 'Alex Johnson',
avatar:
'https://cdn.21st.dev/assets/mirror/5e/5ec92373f165c6fad85bae85c1da338faead91ee7c04c367d5301cbf205f8e1c.jpg',
fallback: 'AJ',
video:
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4#t=20',
},
{
id: 2,
author: 'Sarah Chen',
avatar:
'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=40&h=40&fit=crop&crop=face',
fallback: 'SC',
video:
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=20',
},
{
id: 3,
author: 'Mike Rodriguez',
avatar:
'https://cdn.21st.dev/assets/mirror/65/65a1f730f79ece56e5da623b63a590d12c6812df91ee77ea611536ab2c6cdd3e.jpg',
fallback: 'MR',
video:
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
},
{
id: 4,
author: 'Emma Wilson',
avatar:
'https://cdn.21st.dev/assets/mirror/77/772530c45ac987aa15a72f198ae77a658751291a96789a59e7fcbcc9801d140e.jpg',
fallback: 'EW',
video:
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
},
{
id: 5,
author: 'David Kim',
avatar:
'https://cdn.21st.dev/assets/mirror/72/72de620ca3737f1dec1a5615b300327bb873c8da36b617404798f4c028b0d0d7.jpg',
fallback: 'DK',
video:
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',
},
];
const Example = () => (
<Stories>
<StoriesContent>
{stories.map((story) => (
<Story className="aspect-[3/4] w-[200px]" key={story.id}>
<StoryVideo src={story.video} />
<StoryOverlay />
<StoryAuthor>
<StoryAuthorImage
fallback={story.fallback}
name={story.author}
src={story.avatar}
/>
<StoryAuthorName>{story.author}</StoryAuthorName>
</StoryAuthor>
</Story>
))}
</StoriesContent>
</Stories>
);
export default Example;Part of Kibo UI — browse the full library on 21st.dev.
