Shadcn UI Social Media Trending Block
SocialMediaTrending5 is a grid-based social media feed with larger image tiles. A featured profile section spans two columns with avatar, username, follower count, and CTA button. The remaining cells show image posts and a video card. Hovering over any tile reveals a social network icon (e.g. Instagram, Twitter) in the top-right corner. The video card plays on hover and shows a play button when paused; the icon overlay hides while the video plays.
The grid uses fewer columns than the compact variant (two on mobile, three on large, four on extra-large) with larger gaps, so each tile is more prominent. Rounded corners and accent backgrounds. The social icon appears in a circular badge with a fade-in on hover. The video card uses the same square aspect ratio as image tiles.
Suits feeds that mix photo and video with clear source attribution. The hover icon and video playback add interactivity without modals. Moderate complexity; each post can be an image or video type with an optional social icon. On mobile the grid collapses to two columns with the featured section above the tiles.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |