Gallery 16 - Tab-synced content carousel

Pro

Tabbed navigation synced to a carousel of bordered content cards, each with a gradient-text heading, description, a note, and an image panel.

Vue
Shadcn Gallery 16 block

Component Data

  • ID:gallery16
  • Access:pro
  • Created:Apr 23, 2025
  • Updated:Aug 8, 2026
  • Type:block

Gallery 16 block design & features

The block pairs a shadcn/ui Tabs row with a Carousel so that selecting a tab scrolls to the matching slide and swiping a slide updates the active tab. Each tab trigger sits inside a transparent TabsList with a sliding underline indicator whose width and position animate with a 700ms ease-out transition. CarouselPrevious and CarouselNext buttons appear to the right of the tabs on wider screens.

Each slide is a bordered, rounded-xl card split into a two-column grid. The left half contains a heading with a gradient-to-muted-foreground span for secondary text, a description block that can include paragraphs and lists, and a small muted note at the bottom. The right half holds a bordered image panel with inner padding and rounded corners. The visible carousel overflow allows the next card to peek in from the right.

Stylistically the component feels structured and documentation-like, using soft borders, a subtle card shadow, and gradient text to add visual hierarchy without heavy decoration. The tab-carousel synchronization keeps interaction tight and predictable.