reelkitReelKit

Installation

Install reelkit packages and configure your project.

Package Options

Install only what you use:

PackageDescriptionUse Case
@reelkit/coreFramework-agnostic coreCustom integrations
@reelkit/reactReact componentsReact 18+ applications
@reelkit/react-reel-playerFull-screen vertical reel playerInstagram/TikTok style player
@reelkit/react-lightboxImage gallery lightboxFull-screen image preview
@reelkit/react-stories-playerInstagram-style stories playerStories with auto-advance and gestures
@reelkit/angularAngular standalone componentsAngular 17+ applications
@reelkit/angular-reel-playerFull-screen vertical reel playerInstagram/TikTok style player
@reelkit/angular-lightboxImage gallery lightboxFull-screen image preview
@reelkit/vueVue 3 components and composablesVue 3 applications
@reelkit/vue-reel-playerFull-screen vertical reel playerInstagram/TikTok style player
@reelkit/vue-lightboxImage gallery lightboxFull-screen image preview

Bundle Sizes

All packages are optimized for minimal bundle impact:

PackageJSJS (gzip)CSSCSS (gzip)
@reelkit/core19.3 kB7.4 kB--
@reelkit/react11.9 kB4.4 kB--
@reelkit/react-reel-player15.9 kB5.1 kB9.7 kB2.1 kB
@reelkit/react-lightbox9.6 kB3.2 kB7.7 kB1.6 kB
@reelkit/react-stories-player17.8 kB5.6 kB7.5 kB1.7 kB
@reelkit/angular63.6 kB14.0 kB--
@reelkit/angular-reel-player122.0 kB19.3 kB--
@reelkit/angular-lightbox75.2 kB12.6 kB--
@reelkit/vue13.5 kB4.7 kB--
@reelkit/vue-reel-player19.1 kB5.8 kB9.7 kB2.1 kB
@reelkit/vue-lightbox13.3 kB4.0 kB6.8 kB1.4 kB

Comparison with Other Libraries

ReelKit renders 3 slides to DOM at any time and handles 10,000+ items. Other carousel libraries render all slides, which stalls on large lists.

LibraryJS (gzip)VirtualizationNotes
ReelKit (core + react)11.8 kBZero dependencies
ReelKit (core + angular)21.3 kBZero dependencies
ReelKit (core + vue)12.1 kBZero dependencies
Swiper~25 kBPluginFull bundle; tree-shakeable
Embla Carousel~7 kB✗Lightweight, plugin-based
keen-slider~6 kB✗Zero dependencies

npm

bash

yarn

bash

pnpm

bash

npm

bash

yarn

bash

pnpm

bash

npm

bash

yarn

bash

pnpm

bash

Peer Dependencies

Framework packages have peer dependencies that should already be in your project:

@reelkit/react

  • react >= 18.0.0
  • react-dom >= 18.0.0

@reelkit/react-reel-player

  • @reelkit/react
  • react >= 18.0.0
  • react-dom >= 18.0.0
  • lucide-react >= 0.400.0

@reelkit/react-lightbox

  • @reelkit/react
  • react >= 18.0.0
  • react-dom >= 18.0.0
  • lucide-react >= 0.400.0

@reelkit/react-stories-player

  • @reelkit/react
  • react >= 18.0.0
  • react-dom >= 18.0.0
  • lucide-react >= 0.400.0

@reelkit/angular

  • @angular/core >= 17.0.0
  • @angular/common >= 17.0.0

@reelkit/angular-reel-player

  • @reelkit/angular
  • @angular/core >= 19.0.0
  • lucide-angular >= 0.460.0

@reelkit/angular-lightbox

  • @reelkit/angular
  • @angular/core >= 17.0.0
  • lucide-angular >= 0.400.0

@reelkit/vue

  • vue >= 3.0.0
lucide-react is only needed for the default control icons. If you provide your own controls via renderControls, you can skip installing it.
lucide-angular is only needed for the default control icons. If you provide your own controls via rkPlayerControls, you can skip installing it.

TypeScript

All packages ship with TypeScript type definitions. No additional @types packages needed.

Browser Support

reelkit supports all modern browsers:

  • Chrome/Edge 88+
  • Firefox 78+
  • Safari 14+
  • iOS Safari 14+
  • Android Chrome 88+

Next Steps