56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/0_p7_rfyih3ce.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3x7cofmdt-u_a.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:Ta32,

The Tab Gallery component lets you build an image-driven tabbed interface where each tab switches content with a sliding active pill and crossfade media transition.

About this Component

Turn a static gallery into a guided, interactive content block. Tab Gallery combines images, clickable labels, and per-tab descriptions in a clean horizontal navigation pattern that works across desktop and smaller breakpoints.

Image + Label Pairing

Each item in the array includes an image, title, and optional description. The selected tab shows its image in a fixed aspect-ratio frame, with a consistent media size across all tabs, including placeholders when no image is set.

Sliding Active Tab Animation

Tabs use a shared rounded active background that smoothly slides from label to label, instead of re-rendering separate backgrounds per button. This creates a polished segmented-control feel with minimal visual noise.

Responsive Horizontal Navigation

On tighter widths, the tab row becomes horizontally scrollable. The active tab auto-scrolls into view, edge fades indicate hidden content, and left/right arrows appear only when there are hidden items on that side.

Description Area per Tab

Each tab can show its own description below the navigation. Description text is fully styleable through a dedicated descriptionStyle object, including font, color, padding, and max width for readable long-form copy.

Full Visual Control

You can customize image container styling (border radius, border, aspect ratio) and tab styling (container background, borders, active background, hover state, typography, arrow color, spacing, and padding) directly from Framer property controls.

Refund Policy

All sales are final. Since our products are digital and provide instant access to the Framer code component, we cannot offer refunds, exchanges, or cancellations.

Please review all product details and previews before purchasing. If you have any questions, contact us, and we will be glad to assist before checkout.

By completing your purchase, you agree to this policy.

53:[["$","$L56",null,{"post":{"id":"019cdd0c-524b-7d82-9a79-2c60dd75b101","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"48d8fe17-6048-4d09-94d7-5e6cedf057c5","name":"Feux Design","slug":"feux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/32149/d21bd8eaec590c2612961dde0baa181f-jIorK6c891UUckoIvbOTbUVr0J6FMW","followed":false,"followsYou":false},"media":[],"resources":[{"id":"s7RHjZNrulsOggpRHEnz","resolved":true,"title":"Tab Gallery","body":"$57","bodyJson":null,"introduction":"image tabs with responsive navigation","slug":"tab-gallery","author":{"framerUserId":"48d8fe17-6048-4d09-94d7-5e6cedf057c5","name":"Feux Design","slug":"feux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/32149/d21bd8eaec590c2612961dde0baa181f-jIorK6c891UUckoIvbOTbUVr0J6FMW","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/s7RHjZNrulsOggpRHEnz/tab-gallery-6DcgIEh596u1gpAGgnA5ZaSoHjkb45","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-04T17:28:58.024Z","updatedAt":"2026-03-11T11:17:13.187Z","publishedAt":"2026-03-11T13:18:18.187Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://big-office-310826.framer.app","price":"9","paymentUrl":"https://feuxacademy.lemonsqueezy.com/checkout/buy/a9e578b9-caac-4018-ac7c-0122fbac7453","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"vN28QGdGNqrmLjwSx3S2","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-11T13:18:18.187Z","updatedAt":"2026-03-11T13:18:18.187Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you