Single-item slider for TikTok/Instagram Reels-style experiences.
Virtualized · Touch-first · Zero dependencies · Framework-agnostic

0.x.x — ReelKit is under active development. APIs may change between minor versions until 1.0.

• Virtualized — only 3 slides in DOM, handles 10,000+ items
• Touch first — native swipe with momentum and snap
• Zero dependencies — ~6.0 kB gzip core
• Keyboard & wheel — arrow keys, scroll, and swipe navigation built in
• Loop mode — infinite circular scrolling
• SSR ready — works with Next.js, Remix, and any SSR setup
• Auto-size — omit size prop, uses CSS + ResizeObserver
• TypeScript — strict types, no @types needed

npm install @reelkit/react

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

function App() {
  return (
    <Reel
      className="my-reel"
      count={100}
      direction="vertical"
      itemBuilder={(i) => (
        <div style={{ width: '100%', height: '100%' }}>Slide {i + 1}</div>
      )}
    >
      <ReelIndicator />
    </Reel>
  );
}

By default, Reel measures its own size from CSS via ResizeObserver — no explicit width/height props needed. Just set the container size with CSS:

.my-reel {
  width: 100%;
  height: 100dvh;
}

Full documentation, interactive demos, and API reference at reelkit.dev.

proto use            # sync Node.js version (requires proto)
npm install          # install dependencies
npm run build        # build all packages
npm test             # run all tests
npm run check        # format + lint + typecheck
npm run fmt          # fix formatting

See CONTRIBUTING.md for the full guide.

If ReelKit saved you some time, a star on GitHub would mean a lot — it's a small thing, but it really helps the project get noticed.

MIT