'/%3e%3c!--%20Motion%20trails%20--%3e%3crect%20x='14'%20y='7'%20width='12'%20height='2'%20rx='1'%20fill='white'%20opacity='.2'/%3e%3crect%20x='12'%20y='12'%20width='16'%20height='2'%20rx='1'%20fill='white'%20opacity='.35'/%3e%3crect%20x='10'%20y='17'%20width='20'%20height='2.5'%20rx='1.25'%20fill='white'%20opacity='.5'/%3e%3c!--%20Bold%20chevron%20down%20--%3e%3cpath%20d='M10%2024%20L20%2034%20L30%2024'%20stroke='white'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20fill='none'/%3e%3c/svg%3e)
Installation
Install reelkit packages and configure your project.
Package Options
Install only what you use:
| Package | Description | Use Case |
|---|---|---|
@reelkit/core | Framework-agnostic core | Custom integrations |
@reelkit/stories-core | Framework-agnostic stories engine | Custom stories integrations |
@reelkit/react | React components | React 18+ applications |
@reelkit/react-reel-player | Full-screen vertical reel player | Instagram/TikTok style player |
@reelkit/react-lightbox | Image gallery lightbox | Full-screen image preview |
@reelkit/react-stories-player | Instagram-style stories player | Stories with auto-advance and gestures |
@reelkit/angular | Angular standalone components | Angular 19+ applications |
@reelkit/angular-reel-player | Full-screen vertical reel player | Instagram/TikTok style player |
@reelkit/angular-lightbox | Image gallery lightbox | Full-screen image preview |
@reelkit/angular-stories-player | Instagram-style stories player | Stories with auto-advance and gestures |
@reelkit/vue | Vue 3 components and composables | Vue 3 applications |
@reelkit/vue-reel-player | Full-screen vertical reel player | Instagram/TikTok style player |
@reelkit/vue-lightbox | Image gallery lightbox | Full-screen image preview |
@reelkit/vue-stories-player | Instagram-style stories player | Stories with auto-advance and gestures |
Bundle Sizes
All packages are optimized for minimal bundle impact:
| Package | JS | JS (gzip) | CSS | CSS (gzip) |
|---|---|---|---|---|
@reelkit/core | 29.8 kB | 11.2 kB | - | - |
@reelkit/react | 13.8 kB | 4.9 kB | - | - |
@reelkit/react-reel-player | 17.1 kB | 5.4 kB | 9.7 kB | 2.1 kB |
@reelkit/react-lightbox | 12.7 kB | 4.1 kB | 7.9 kB | 1.6 kB |
@reelkit/react-stories-player | 25.3 kB | 7.5 kB | 9.9 kB | 2.1 kB |
@reelkit/angular | 70.2 kB | 15.8 kB | - | - |
@reelkit/angular-reel-player | 148.1 kB | 24.4 kB | 15.0 kB | 3.5 kB |
@reelkit/angular-lightbox | 113.6 kB | 19.1 kB | 10.2 kB | 2.2 kB |
@reelkit/vue | 15.3 kB | 5.2 kB | - | - |
@reelkit/vue-reel-player | 21.0 kB | 6.2 kB | 9.7 kB | 2.1 kB |
@reelkit/vue-lightbox | 18.2 kB | 4.9 kB | 7.0 kB | 1.4 kB |
@reelkit/vue-stories-player | 25.4 kB | 7.9 kB | 9.9 kB | 2.1 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.
| Library | JS (gzip) | Virtualization | Notes |
|---|---|---|---|
| ReelKit (core + react) | 16.1 kB | Zero dependencies | |
| ReelKit (core + angular) | 27.0 kB | Zero dependencies | |
| ReelKit (core + vue) | 16.4 kB | Zero dependencies | |
| Swiper | ~25 kB | Plugin | Full bundle; tree-shakeable |
| Embla Carousel | ~7 kB | ✗ | Lightweight, plugin-based |
| keen-slider | ~6 kB | ✗ | Zero dependencies |
npm
npm install @reelkit/angularyarn
yarn add @reelkit/angularpnpm
pnpm add @reelkit/angularPeer Dependencies
Framework packages have peer dependencies that should already be in your project:
@reelkit/react
react>= 18.0.0react-dom>= 18.0.0
@reelkit/react-reel-player
@reelkit/reactreact>= 18.0.0react-dom>= 18.0.0lucide-react>= 0.400.0
@reelkit/react-lightbox
@reelkit/reactreact>= 18.0.0react-dom>= 18.0.0lucide-react>= 0.400.0
@reelkit/react-stories-player
@reelkit/reactreact>= 18.0.0react-dom>= 18.0.0lucide-react>= 0.400.0
@reelkit/angular
@angular/core>= 19.0.0@angular/common>= 19.0.0
@reelkit/angular-reel-player
@reelkit/angular@angular/core>= 19.0.0@angular/common>= 19.0.0lucide-angular>= 0.460.0
@reelkit/angular-lightbox
@reelkit/angular@angular/core>= 19.0.0@angular/common>= 19.0.0lucide-angular>= 0.460.0
@reelkit/angular-stories-player
@reelkit/angular@angular/core>= 19.0.0@angular/common>= 19.0.0lucide-angular>= 0.460.0
@reelkit/vue
vue>= 3.0.0
@reelkit/vue-reel-player
@reelkit/vuevue>= 3.3.0lucide-vue-next>= 0.400.0
@reelkit/vue-lightbox
@reelkit/vuevue>= 3.0.0lucide-vue-next>= 0.400.0
@reelkit/vue-stories-player
@reelkit/vuevue>= 3.3.0lucide-vue-next>= 0.400.0
lucide-react is only needed for the default icons. If you provide your own controls and navigation through renderControls and renderNavigation (renderHeader and renderNavigation on the stories player), you can skip installing it.
lucide-angular is only needed for the default icons. If you provide your own controls and navigation through the template slots (rkPlayerControls and rkPlayerNavigation, rkLightboxControls and rkLightboxNavigation, rkStoriesHeader and rkStoriesNavigation), you can skip installing it.
lucide-vue-next is only needed for the default icons. If you provide your own controls and navigation through the #controls and #navigation scoped slots (#header and #navigation on the stories player), 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
- Core Guide - framework-agnostic engine
- Framework Guide - components, demos, and integrationFramework Guide - components, demos, and integrationFramework Guide - components, demos, and integration
- Reel Player - TikTok/Reels-style video playerReel Player - TikTok/Reels-style video playerReel Player - TikTok/Reels-style video player
- Lightbox - image & video galleryLightbox - image & video galleryLightbox - image & video gallery
- Stories Player - Instagram-style stories viewerStories Player - Instagram-style stories viewerStories Player - Instagram-style stories viewer