Getting Started
Templates
Components
| Prop | Type | Default | Description |
|---|---|---|---|
stories | Story[] | [] | Array of story objects to display. |
profile | StoryProfile | - | Profile information for the story owner. |
defaultDuration | number | 5 | Default duration in seconds for image stories. |
className | string | - | Custom class name for the trigger container. |
triggerSize | "sm" | "md" | "lg" | "md" | Size of the avatar trigger. |
ringColor | string | #2b7fff | Color of the animated ring around the avatar. |
onReply | (storyId: string, message: string) => void | - | Callback when user sends a reply. |
onLike | (storyId: string) => void | - | Callback when user likes a story. |
| Prop | Type | Description |
|---|---|---|
id | string | Unique identifier for the story. |
platform | SocialPlatform | Platform type (instagram, tiktok, etc). |
mediaUrl | string | URL of the image or video. |
linkUrl | string | Optional link URL. |
caption | string | Optional caption text. |
duration | number | Duration in seconds (for images). |
music | object | Optional music info with title and artist. |
| Prop | Type | Description |
|---|---|---|
name | string | Display name of the user. |
username | string | Username to show in the story. |
avatarUrl | string | URL of the profile picture. |
subtitle | string | Optional subtitle text. |
import { InstagramStories, type Story } from "@/components/ui/instagram-stories"
const stories: Story[] = [
{
id: "1",
platform: "instagram",
mediaUrl: "/story-1.jpg",
caption: "My first story",
duration: 5,
},
{
id: "2",
platform: "instagram",
mediaUrl: "/story-video.mp4",
music: {
title: "Song Name",
artist: "Artist Name",
},
},
]
const profile = {
name: "John Doe",
username: "johndoe",
avatarUrl: "/avatar.jpg",
}
export default function MyComponent() {
return (
<InstagramStories
stories={stories}
profile={profile}
triggerSize="lg"
ringColor="#e1306c"
onLike={(id) => console.log(`Liked story ${id}`)}
onReply={(id, msg) => console.log(`Reply to ${id}: ${msg}`)}
/>
)
}