Image Backed

Tabs with background images that change on selection with smooth transitions.

Refresh preview

Copy CLI command

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.

Perfect for media-heavy platforms, portfolio showcases, or any interface where each tab corresponds to a distinct visual scene.

Use images that are visually distinct per tab so the transition is meaningful. Keep imageOpacity balanced so tab labels remain readable.

Image-backed tabs create immediate visual hierarchy and communicate section identity at a glance — far more memorable than text-only navigation.

Yes — add an 'image' property to each tab item in the tabs array, or use the fallback images array.

Images cross-fade using Framer Motion's AnimatePresence with a subtle scale, creating a cinematic feel.

Tab buttons include proper focus states and color contrast. Consider adding aria-label to each tab for screen readers.