About
Here is social stories component
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Social Stories to your project and fits it to your theme.
Code
How Social Stories is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { useMemo } from "react"
import { SocialStories, type Story } from "@/components/ui/social-stories"
export function SocialStoriesDemo() {
const stories = useMemo<Story[]>(
() => [
{
id: "1",
platform: "instagram",
mediaUrl:
"https://cdn.21st.dev/assets/mirror/00/00afe680e6fefa4348397144d160c9cfc7c7046b86260176a81782128eefb842.mp4",
linkUrl: "https://instagram.com",
caption: "",
duration: 5,
},
{
id: "2",
platform: "instagram",
mediaUrl:
"https://cdn.21st.dev/assets/mirror/ec/ec58576ea15cdd73b08afaeb6527bc2ea911c8dc9872c3e93ab4ce9c32dd149a.mp4",
linkUrl: "https://instagram.com",
caption: "",
duration: 7,
},
{
id: "3",
platform: "instagram",
mediaUrl:
"https://cdn.21st.dev/assets/mirror/80/80b9e5b951fff75e87281f9f6172b8531e086c4b479141b835c4586fe3bdc6ca.mp4",
linkUrl: "https://instagram.com",
caption: "",
duration: 10,
},
],
[]
)
const profile = useMemo(
() => ({
name: "Abhishek Singh",
avatarUrl:
"https://cdn.21st.dev/assets/mirror/19/19957559d3c2cc69fe7c9e253d0f936c203bb3fbac54f1bc87cd04530eda6870.avif",
}),
[]
)
return (
<div className="w-full h-screen flex items-center justify-center bg-black antialiased">
<SocialStories stories={stories} profile={profile} />
</div>
)
}
export default SocialStoriesDemo