Instagram Stories Component Library
Build beautiful, performant Instagram-style stories with
react-instagram-stories — a high-performance React
component. Smooth 3D cube drag transitions, touch gestures, and
fully customizable with Tailwind CSS via classNames. Zero runtime
dependencies, TypeScript support, and React 18+ compatible.
View on GitHub
|
Install from NPM
Built for Modern Experiences
Everything you need for a fast, accessible, and delightful user
experience.
-
3D Cube Transition — Instagram-style 3D cube drag
to peek at and switch between users
-
Tailwind CSS Support — Fully customizable via
classNames props, style every sub-element with Tailwind or custom
CSS
-
High Performance — Virtualized list, smart
preloading, and 60fps hardware-accelerated animations
-
Media Support — Images, videos, text, and custom
React components
-
Keyboard and Touch — Full keyboard navigation,
tap, drag, and long-press support
-
Accessible — ARIA labels, keyboard support, and
screen reader friendly
Performance Optimized
Built from the ground up for speed and efficiency. Handle thousands
of stories without breaking a sweat.
-
Virtualized Rendering — Only renders visible
stories, supporting 1000+ users smoothly
-
Smart Preloading — Automatically preloads next
stories for seamless transitions
-
Optimized Animations — 60fps smooth animations
using hardware acceleration
-
Zero Dependencies — Lightweight ~30 KB bundle
with zero runtime dependencies
Rich Content Types
Support for any content type you can imagine. From simple images to
interactive experiences.
-
Images — Support for any image format with
automatic aspect ratio handling
-
Videos — Auto-playing videos with audio support
and buffering detection
-
Text — Beautiful text overlays with customizable
colors and backgrounds
-
Custom Components — Embed any React component for
polls, quizzes, products, and more
Quick Start
Install react-instagram-stories with npm:
npm install react-instagram-stories
Accessible by Default
Built with accessibility in mind. Everyone can enjoy your stories,
regardless of how they interact.
-
Keyboard Navigation — Complete keyboard support
with arrow keys, space, and escape
-
Screen Reader Ready — ARIA labels and semantic
HTML for accessibility tools
-
Reduced Motion — Respects user preferences for
reduced motion animations
-
Focus Management — Proper focus handling for
keyboard and screen reader users