Shadcn UI Social Media Trending Block
SocialMediaTrending1 is a horizontal carousel of social media post cards. A centered serif headline sits above the carousel. Each card includes a header with avatar, name, username, and social media icon; a portrait-ratio video that plays on hover and shows a play button when paused; and a footer linking to an associated product with thumbnail and arrow button. A scroll progress bar and rounded prev/next buttons sit below the carousel.
Light background with card-based layout. Each card has padding, rounded corners, and a portrait video area. The progress bar uses a muted track with a primary fill that advances as the user scrolls. Rounded full buttons for navigation. Static layout with hover-triggered video playback; no carousel auto-scroll.
Polished and product-focused, with a clear UGC-meets-commerce pattern. The video-on-hover and product links make it well suited for shoppable social content. Moderate complexity; each post needs a video URL, avatar, product image, and product link. Content-driven, since every card requires real media and product data.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
aspect-ratio @shadcn | Registry |
avatar @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |
carousel @shadcn | Registry |