Shadcn UI Social Media Trending Block
SocialMediaTrending2 is a horizontal auto-scrolling carousel of social media image cards. A title and underlined profile link sit in a header above the carousel. Each card shows a square image, with a footer containing avatar, username, and social media icon. The carousel scrolls continuously; hovering over the carousel area pauses autoplay, and moving the cursor away resumes it. Each card links to a product or post URL.
Accent background with the carousel spanning full width. Cards have rounded corners and a square image with a zoom-on-hover effect. The header uses bold typography with the profile link aligned to the right on desktop. Responsive basis values show more cards on larger screens. The loop is seamless with no visible start or end.
Modern and ambient, with the auto-scroll creating a ticker-like feed. The hover-to-pause behavior lets users stop and interact without extra controls. Moderate complexity; requires an array of posts with images, avatars, usernames, and social icons. On mobile the profile link moves below the carousel.
Dependencies
| Package | Type |
|---|---|
| embla-carousel-auto-scroll | NPM |
| react | NPM |
aspect-ratio @shadcn | Registry |
avatar @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |
carousel @shadcn | Registry |