reelkit

KO | EN

gitlite — search

#python #php #javascript #ios #java #nodejs #react #swift #golang #bot #education #adapter

★ 39 Open GitHub ↗

Single-item slider for TikTok/Instagram Reels-style experiences. Virtualized, touch-first, zero dependencies.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  Single-item slider for TikTok/Instagram Reels-style experiences.<br/>
  Virtualized · Touch-first · Zero dependencies · Framework-agnostic
</p>

> [!WARNING]
> **0.x.x** — ReelKit is under active development. APIs may change between minor versions until 1.0.

## Features

- **Virtualized** — only 3 slides in DOM, handles 10,000+ items
- **Touch first** — native swipe with momentum and snap
- **Zero dependencies** — ~9.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

## Packages

| Package                                                                | Description                       | JS (gzip) |
| ---------------------------------------------------------------------- | --------------------------------- | --------- |
| [@reelkit/core](packages/reelkit-core)                                 | Framework-agnostic slider engine  | 9.0 kB    |
| [@reelkit/react](packages/reelkit-react)                               | React components and hooks        | 4.7 kB    |
| [@reelkit/react-reel-player](packages/reelkit-react-reel-player)       | Full-screen video reel player     | 5.4 kB    |
| [@reelkit/react-lightbox](packages/reelkit-react-lightbox)             | Image & video gallery lightbox    | 3.4 kB    |
| [@reelkit/stories-core](packages/reelkit-stories-core)                 | Framework-agnostic stories engine | 1.7 kB    |
| [@reelkit/react-stories-player](packages/reelkit-react-stories-player) | Instagram-style stories player    | 5.8 kB    |
| [@reelkit/angular](packages/reelkit-angular)                           | Angular standalone components     | 15.1 kB   |
| [@reelkit/angular-reel-player](packages/reelkit-angular-reel-player)   | Full-screen video reel player     | 24.4 kB   |
| [@reelkit/angular-lightbox](packages/reelkit-angular-lightbox)         | Image & video gallery lightbox    | 15.4 kB   |
| [@reelkit/vue](packages/reelkit-vue)                                   | Vue 3 components and composables  | 4.9 kB    |
| [@reelkit/vue-reel-player](packages/reelkit-vue-reel-player)           | Full-screen video reel player     | 6.2 kB    |
| [@reelkit/vue-lightbox](packages/reelkit-vue-lightbox)                 | Image & video gallery lightbox    | 4.1 kB    |

## Try It

| Framework | Live Demo                                                                                                                                          | Playground                                                                                                                                                                           |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| React     | [![React Demo](https://img.shields.io/badge/Live_Demo-6366f1?logo=react&logoColor=white)](https://react-demo.reelkit.dev/?utm_source=github)       | [![React StackBlitz](https://img.shields.io/badge/Open_in_StackBlitz-1269D3?logo=stackblitz&logoColor=white)](https://stackblitz.com/github/KonstantinKai/reelkit-react-starter)     |
| Angular   | [![Angular Demo](https://img.shields.io/badge/Live_Demo-6366f1?logo=angular&logoColor=white)](https://angular-demo.reelkit.dev/?utm_source=github) | [![Angular StackBlitz](https://img.shields.io/badge/Open_in_StackBlitz-1269D3?logo=stackblitz&logoColor=white)](https://stackblitz.com/github/KonstantinKai/reelkit-angular-starter) |
| Vue       | [![Vue Demo](https://img.shields.io/badge/Live_Demo-6366f1?logo=vuedotjs&logoColor=white)](https://vue-demo.reelkit.dev/?utm_source=github)        | [![Vue StackBlitz](https://img.shields.io/badge/Open_in_StackBlitz-1269D3?logo=stackblitz&logoColor=white)](https://stackblitz.com/github/KonstantinKai/reelkit-vue-starter)         |

## Quick Start

```bash
npm install @reelkit/react
```

```tsx
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:

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

## Documentation

Full documentation, interactive demos, and API reference at **[reelkit.dev](https://reelkit.dev)**.

## AI / LLM Integration

Machine-readable docs for AI coding assistants.

| Endpoint                                                                         | Purpose                                                  |
| -------------------------------------------------------------------------------- | -------------------------------------------------------- |
| [`reelkit.dev/llms.txt`](https://reelkit.dev/llms.txt)                           | Link index of every doc page. Drop into any LLM context. |
| [`reelkit.dev/llms-full.txt`](https://reelkit.dev/llms-full.txt)                 | Same index with embedded per-page summaries.             |
| [`context7.com/websites/reelkit_dev`](https://context7.com/websites/reelkit_dev) | Context7 manifest. Use with the `@context7` MCP server.  |

Both `.txt` endpoints regenerate on every docs build, so the corpus tracks the published site.

## Development

```bash
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](CONTRIBUTING.md) for the full guide.

## Support

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.

## License

[MIT](LICENSE)

reelkit

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README