ReelKit

Single-item slider for TikTok/Instagram Reels-style experiences

Framework-agnostic, virtualized, touch-first. Built for vertical video feeds, story viewers, and fullscreen galleries.

React

Angular

Vue

Get Started Star on GitHub

Virtualized

Only 3 slides in DOM

Live demo — use the arrows

How it works

A whole feed.
Just three slides.

Your feed can hold thousands of items. Reel keeps only the current slide and its immediate neighbors mounted.

1
Keep the next swipe ready
The current slide fills the viewport. One neighbor waits above, another below.
2
Move through the feed
Swipe up for the next item, or down for the previous one. The mounted slides move together.
3
Update only what changed
Once the slide settles, the item that left the range is removed and the new neighbor is mounted. Shared items stay in place.

At either end of a non-looping feed, only two slides are needed. Watch the mounted count change as the demo reaches the edges.

9 items in the feed3 mounted

VIEWPORT

PreviousOffscreen

CurrentVisible

NextOffscreen

Slide 3 of 9

In the DOM: 2, 3, 4

Expanded view · Neighbors are hidden in the actual slider

Built for performance

Virtualized rendering, zero dependencies, 60fps transitions

3in DOM

Virtualized

Handle 10,000+ items. Only 3 slides rendered at any time.

0deps

Zero Dependencies

No runtime dependencies. Core is ~10.2 kB gzipped.

60fps

Touch First

Native swipe gestures with momentum and snap points.

Performant

Keyboard Navigation

Framework Agnostic

TypeScript First

Headless + Styled

Ready-made Components

Shareable URL State

Why "ReelKit"?

Reel — vertical video feeds like Instagram Reels and TikTok. One piece of content at a time, swipe to advance.

Kit — a modular set of packages. Use the headless core for full control, framework bindings for quick setup, or ready-made overlays for video players and image galleries.

Simple API

Get started with just a few lines of code

tsx

import { Reel, ReelIndicator } from '@reelkit/react';

const items = ['Slide 1', 'Slide 2', 'Slide 3'];

function App() {
  return (
    <Reel
      count={items.length}
      size={[400, 600]}
      itemBuilder={(index) => (
        <div className="slide">{items[index]}</div>
      )}
    >
      <ReelIndicator />
    </Reel>
  );
}