Horizontal stories row with seen / unseen rings and an add-story tile.
npx shadcn@latest add @lokalhost/story-railAlso installs Avatars.
The source is copied to components/blocks/story-rail.tsx — it’s yours to edit.
import { StoryRail } from "@/components/blocks/story-rail";
return (
<StoryRail
me={{ name: "Hilal Ahmad" }}
onAdd={() => router.push("/story/new")}
onPress={(id) => router.push(`/story/${id}`)}
stories={[
{ id: "a", name: "Amelia Hart" },
{ id: "j", name: "Jonas Berg" },
{ id: "m", name: "Maya Lin", seen: true },
]}
/>
);| Prop | Type | Default | Description |
|---|---|---|---|
storiesrequired | { id: string; name: string; avatar?: string; seen?: boolean }[] | — | Stories to show. |
onPressrequired | (id: string) => void | — | Story press handler. |
onAdd | () => void | undefined | Shows a “Your story” tile first. |
me | { name: string; avatar?: string } | undefined | Avatar for the “Your story” tile. |