# Story rail

Story rail: a free component, built on your design tokens, to use at the top of a social or media feed, for the stories people have posted today. A row of story rings with people's photos that scrolls sideways inside its box: your own add ring first, unseen stories in an accent ring, close friends marked with a star, a live badge, and seen ones in grey.

Prompt: Add the OpenDesigner component story-rail to this project: https://opendesigner.dev/library/r/story-rail.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: unseen, seen, close friends, live, add, hover, focus, scrolled to end.

Accessibility: Each story is a button whose name says who posted it and whether it is new, live or seen; opening one marks it seen, and on wider screens two arrow buttons scroll the rail.

File: https://opendesigner.dev/library/r/story-rail.html