Feature 393 - 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.

Shadcn Feature 393 block

Component data

ID
feature393
Access
pro
Created
Apr 23, 2025
Updated
Aug 8, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Feature 393 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.