Swipe (Mobile)
Mobile-optimized swipeable tabs with spring physics and drag gestures.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| tabs | TabItem[] | [{id: '1', label: 'View 1', content: '...'}, ...] | Array of tab items with id, label, and optional content node. |
| defaultActive | number | 0 | Index of the initially active tab. |
| containerBgColor | string | #ffffff | Background color of the container. |
| containerMaxWidth | string | 28rem | Maximum width of the container. |
| activeTabTextColor | string | #2563eb | Text color and underline color of the active tab. |
| contentHeight | string | 10rem | Height of the content area. |
| springStiffness | number | 260 | Spring animation stiffness for swipe transitions. |
| springDamping | number | 28 | Spring animation damping for swipe transitions. |
When to Use
Excellent for mobile-first applications and touch interfaces. Use when content should feel like a native swipeable panel, not just a click-to-reveal tab.
Best Practices
Keep content height consistent across tabs to avoid layout jumps. Consider adding swipe hint UI on first load for discoverability.
Why This Component Matters
Swipe-based navigation mirrors native mobile patterns users already know, reducing cognitive friction and making the interface feel immediately intuitive.
FAQ
QHow does the swipe work?
Framer Motion's drag constraint detects horizontal swipe velocity and direction, then animates the content panel using spring physics.
QCan I disable swipe and use click-only?
Remove the drag props from the inner container — the tab buttons will still work for click-based navigation.
QIs it accessible?
Tab buttons support keyboard navigation. For screen readers, ensure content divs have appropriate aria-live regions.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.