Reel
A composable, Instagram-style Reel component with progress indicators and navigation controls.
Powered by
Installation
npx kibo-ui@latest add reel
Features
- Full-height, 9:16 aspect ratio container optimized for vertical video
- Progress indicators showing current and total reels
- Automatic video playback with seamless transitions
- Support for both video and image content
- Customizable controls for play/pause, mute/unmute, and navigation
- Touch-friendly navigation by tapping left/right sides
- Composable architecture for custom overlays and content
- Header and footer sections for metadata display
- Social media-style interactions support
- Keyboard accessibility for all controls
- Auto-advance to next reel when current finishes
- Responsive design that scales with viewport height
Examples
Reel with Images
Display a series of images with automatic timing and transitions.
Custom Reel
Fully customized reel with social media-style interface including author info, likes, comments, and share buttons.
Minimal Reel
Simple reel with just video content, progress bar, and navigation.