reelkitReelKit

Getting Started

reelkit is a single-item slider — one item visible at a time, like TikTok, Instagram Reels, or Stories. Perfect for vertical video feeds, fullscreen galleries, and swipeable content.

0.x.x — Unstable API

ReelKit is under active development. While in 0.x.x, APIs may change between minor versions without a deprecation period. Pin your version to avoid unexpected breakage.

Select Your Framework

Try It Online

Try it in the browser, no install required:

Quick Start

Minimal vertical slider with React:

tsx

Quick Start

Minimal vertical slider with Angular:

typescript

Quick Start

Minimal vertical slider with Vue:

vue

Key Concepts

Reel

The Reel component is the main container that manages slider state, handles touch gestures, keyboard navigation, and animations. It uses a render prop pattern via itemBuilder for rendering slides.

itemBuilder

The itemBuilder prop is a function that receives the index and returns the content for each slide. This pattern enables virtualization — only visible items are rendered.

ReelIndicator

Optional component that displays Instagram-style progress indicators showing the current position in the slider.

tsx
html
vue-html

Navigation

Built-in navigation methods:

  • Touch/Swipe: Drag to navigate with momentum and snap
  • Keyboard: Arrow keys (overlay components also handle Escape to close)
  • Mouse Wheel: Enable with enableWheel prop
  • Programmatic: Use apiRef for next(), prev(), goTo()
tsx
html
vue

Next Steps