Image Backed
Tabs with background images that change on selection.
Main Features of Image Backed
How to Use Image Backed in Next.js
Installation Guide for Image Backed
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
tabs | TabItem[] | [{id: '1', label: 'Scene 1', image?: url}, ...] | Array of tab items with id, label, and optional 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. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
containerBgColor | string | #18181b | Background color of the container (hex, rgb, or hsl). |
containerHeight | string | 10rem | Height of the container (CSS value). |
containerWidth | string | 100% | Width of the container (CSS value). |
containerMaxWidth | string | 32rem | Maximum width of the container (CSS value). |
borderRadius | string | 1.5rem | Border radius of the container (CSS value). |
imageOpacity | number | 0.5 | Opacity of background images (0-1). |
activeButtonBgColor | string | #ffffff | Background color of active buttons (hex, rgb, or hsl). |
activeButtonTextColor | string | #000000 | Text color of active buttons (hex, rgb, or hsl). |
activeButtonScale | number | 1.1 | Scale of active buttons. |
inactiveButtonTextColor | string | rgba(255,255,255,0.7) | Text color of inactive buttons (hex, rgb, or hsl). |
inactiveButtonHoverTextColor | string | #ffffff | Text color of inactive buttons on hover (hex, rgb, or hsl). |
buttonBorderRadius | string | 9999px | Border radius of buttons (CSS value). |
buttonPadding | string | 0.5rem 1.5rem | Padding of tab buttons (CSS value). |
fontSize | string | 1rem | Font size of tab labels (CSS value). |
fontWeight | string | bold | Font weight of tab labels (CSS value). |
transitionDuration | number | 0.3 | Duration of image transitions in seconds. |
Related Components
When to Use
Perfect for media-heavy blogs, cinematics archives, and Next.js platforms that want a high-tech 'Image-Backed' aesthetic. Use these tabs to communicate hierarchical power and digital intelligence through background image swaps.
Best Practices
Maintain scalable component architecture by pairing this with high-contrast imagery. Follow React best practices by using Framer Motion for the image reveal transitions. Optimize for performance by managed the image opacity.
Why This Component Matters in Modern UI Development
Image-enhanced layouts communicate technical authority, sophistication, and digital craft. This production-ready UI template helpsคุณ build an interface that feels organized and high-end, adding a unique 'Corporate' signatures to your brand selection.
Frequently Asked Questions
QHow work image swaps?
The component features localized absolute positioning and opacity transitions to smoothly cross-fade the background images when tabs are selected, creating a high-fidelity 'opening' effect.
QAre colors dynamic?
Yes, both the primary 'activeButtonBgColor' and background glows can be adjusted to create 'Industrial' or 'Cyber' agency effects.
QIs it mobile responsive?
The tab buttons and background scales adapt for mobile, ensuring the bold narrative remains impactful and structural on small screens.