Image Backed
Tabs with background images that change on selection with smooth transitions.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| tabs | TabItem[] | [{id: '1', label: 'Scene 1', image?: url}, ...] | Array of tab items with id, label, and optional per-tab image. |
| images | string[] | [url1, url2, ...] | Fallback array of image URLs if tabs don't have images. |
| defaultActive | number | 0 | Index of the initially active tab. |
| containerBgColor | string | #18181b | Background color of the container. |
| containerHeight | string | 10rem | Height of the container. |
| containerMaxWidth | string | 32rem | Maximum width of the container. |
| imageOpacity | number | 0.5 | Opacity of background images (0–1). |
| activeButtonBgColor | string | #ffffff | Background color of the active tab button. |
| activeButtonTextColor | string | #000000 | Text color of the active tab button. |
When to Use
Perfect for media-heavy platforms, portfolio showcases, or any interface where each tab corresponds to a distinct visual scene.
Best Practices
Use images that are visually distinct per tab so the transition is meaningful. Keep imageOpacity balanced so tab labels remain readable.
Why This Component Matters
Image-backed tabs create immediate visual hierarchy and communicate section identity at a glance — far more memorable than text-only navigation.
FAQ
QCan each tab have its own image?
Yes — add an 'image' property to each tab item in the tabs array, or use the fallback images array.
QHow smooth is the transition?
Images cross-fade using Framer Motion's AnimatePresence with a subtle scale, creating a cinematic feel.
QIs it accessible?
Tab buttons include proper focus states and color contrast. Consider adding aria-label to each tab for screen readers.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.