A React Facebook UI component - the news feed post, the reel and the story. For clones, mockups and references.
FacebookFeed playground
Install FacebookFeed
1. New project? One command installs the package and wires everything - see Installation:
pnpm dlx zyncat-ui init2. Import the component - it loads its own stylesheet:
import { FacebookFeed } from '@zyncat/ui/facebook-feed';Usage
import { FacebookFeed } from '@zyncat/ui/facebook-feed'; <FacebookFeed surface="post" name="Zyncat Studio" caption="New build is live." media={photo} likes={1240} />Compose FacebookFeed in your application. No Tailwind or external styling library is required; every value resolves from Zyncat UI's token vocabulary.
FacebookFeed props
FacebookFeed
Frequently asked questions
Import the component and pick a surface: <FacebookFeed surface="post" width="web" name="Alpenglow Daily" caption="Three days above the fog line" media={photo} likes={12400} />. surface takes post, reel or story, width takes mobile (the 390px square-cornered card) or web (the 680px rounded one), and ratio frames the media at 4:5, 1.1:1, 1:1, 3:4 or 16:9. It is the Facebook UI only, so you keep your own data layer and your own backend.
No. There is no Facebook API, no Graph API call, no login and no real posts - it replicates how the news feed looks and behaves, and nothing more. Every value on screen is a prop you pass: name, caption, stamp, avatar, media, likes, comments and shares, with counts rendered exact below 1,000 and then compacted to 1.2K, 48K or 1.4M the way Facebook does.
Three, behind one surface prop. post is the news feed card - caption above the media the way Facebook does it, the blurred saturated letterbox behind the frame, the like, comment and share bar, and the like/love reaction pips. reel is the reels stage at 557x878 around a 9:16 clip or 1601x886 around a 16:9 one, and story is a 486x864 stage with the segmented progress track that segments and segment drive.
Yes - a mockup is what a replica is for. It draws a live Facebook post card in the DOM at the platform's real metrics, so it stays sharp at any zoom and never ages out of date the way a PSD, a Figma frame or an old screenshot does. It is a React component rather than a fake-post image generator: nothing is submitted anywhere, and the content is whatever you pass in props.
Two toggles and one report. liked toggles the thumb on the feed card and the reels rail and adds one to the displayed reaction count, muted toggles the speaker on reels and stories, and both are controllable through liked/defaultLiked/onLikedChange and muted/defaultMuted/onMutedChange. Everything else is stateless and reports through onAction: comment, share, follow, menu, dismiss, more, search and play, each fired by a real button carrying an aria-label.
Yes. @zyncat/ui/facebook-feed ships compiled ESM with its 'use client' directive intact, so it drops into the Next.js App Router with no transpilePackages config and zero runtime dependencies. media and avatar take a URL string or your own node, so next/image, a plain <img> or a <video> all work - nothing autoplays and no request is made for you. Being a replica, its metrics are pinned constants your theme cannot move; only the type reads --font-body.