InstagramFeed

A React Instagram UI component - one feed post at Instagram's own metrics. For clones, mockups and references.

northfieldsupply1d
760.4K2.6K3.1K

northfieldsupply Munnar vibe #kerala #travel #dubai

Double-tap the media to like it; the heart, bookmark and mute chip are real buttons, reachable by Tab.

Install InstagramFeed

1. New project? One command installs the package and wires everything - see Installation:

bash
pnpm dlx zyncat-ui init

2. Import the component - it loads its own stylesheet:

tsx
import { InstagramFeed } from '@zyncat/ui/instagram-feed';

Usage

tsx
import { InstagramFeed } from '@zyncat/ui/instagram-feed';
 
<InstagramFeed handle="studio.zyncat" caption="Shot on the roof." media={<img src={photo} alt="" />} likes={2600} />

Compose InstagramFeed in your application. No Tailwind or external styling library is required; every value resolves from Zyncat UI's token vocabulary.

InstagramFeed props

InstagramFeed

PropTypeDefaultDescription
...htmlAttributesHTMLAttributes—Standard <article> attributes (aria-*, data-*, title, ...) forwarded to the card.
type'image' | 'video''image'Post kind. `video` runs the black media frame full-bleed and floats the header on it in white.
width'mobile' | 'web''web'Which column to reproduce: the 390px mobile viewport, or the 470px web column that also carries Follow.
handle*string—Account name shown in the header and again in front of the caption.
captionstring—Caption body. Clipped at 125 characters with a trailing "... more"; #tags and
ratio'4:5' | '1:1''4:5'Media frame proportion.
mediaReactNode—Post media. A string is read as an image URL; a node (`<img>`, `<video>`, `next/image`) is rendered as given and gets `alt` from you. Empty leaves the platform's flat placeholder.
avatarReactNode—Avatar inside the story ring. A string is read as an image URL; a node is rendered as given.
audiostring'Original audio'Audio credit on the second header line, video posts only.
stampstring—Relative time in the header, e.g. `1d`. Omitted entirely when unset.
likesnumber0Likes excluding you; the displayed count adds one while `liked` is on.
commentsnumber0Comment count beside the speech glyph.
repostsnumber0Repost count beside the repost glyph.
likedboolean—Controlled like state.
defaultLikedbooleanfalseUncontrolled initial like state.
onLikedChange(liked: boolean) => void—Fires when the heart or a double-tap on the media toggles the like.
savedboolean—Controlled bookmark state.
defaultSavedbooleanfalseUncontrolled initial bookmark state.
onSavedChange(saved: boolean) => void—Fires when the bookmark toggles.
mutedboolean—Controlled mute state for the video mute chip.
defaultMutedbooleantrueUncontrolled initial mute state.
onMutedChange(muted: boolean) => void—Fires when the mute chip toggles. The component never touches a media element you supplied.
onAction(action: InstagramFeedAction) => void—Fires for the actions that carry no state: comment, repost, send, menu, follow.
classNamestring—Extra class(es) merged onto the card.
styleCSSProperties—Inline styles merged onto the card.

Frequently asked questions

Import InstagramFeed from '@zyncat/ui/instagram-feed' and give it one post: <InstagramFeed handle="studio.zyncat" caption="Shot on the roof." media={<img src={photo} alt="" />} likes={2600} />. Each instance is a single feed post, so the feed in an Instagram clone project is your own array mapped over it. The component owns the interface and the interactions; the data, routing and auth stay yours.

No. There is no Instagram API, no login and no network call in it - this is the Instagram UI, not an embed widget. The media and avatar props take an image URL or your own node (<img>, <video>, next/image), so the post renders exactly the content you pass it. If you want your live account embedded on a marketing site, you want an embed service instead.

The header with the gradient story ring, handle, timestamp and Follow button; the 4:5 or 1:1 media frame, black and full-bleed when type="video", with the mute chip and the audio credit line; the action row of heart, comment, repost, share and bookmark glyphs with counts compacted to 760.4K; and the caption, clipped at 125 characters with a trailing "... more" and #tags and @mentions in Instagram's link blue. It is one post - not a carousel, a comments thread, a stories tray or a profile grid.

It is already wired. Double-tapping the media frame likes the post and bursts an 88px heart on a spring, while the heart glyph fills #ff3040 and the count steps up by one. Read it with onLikedChange, or drive it yourself with liked and defaultLiked. Under prefers-reduced-motion the heart burst is skipped and the like still registers.

Neither. Searching "instagram ui kit" or "instagram mockup" mostly returns Figma community files and PSDs you cannot ship. This is a working React component in plain CSS and semantic HTML - no Tailwind, no CSS-in-JS, zero runtime dependencies - so the heart, bookmark and mute chip are real buttons with aria-pressed that you reach by Tab, not layers in a design file.

Yes. @zyncat/ui/instagram-feed ships compiled ESM with its 'use client' directive intact, so it works in the Next.js App Router on React 19 with no transpilePackages config. The post markup is in the server-rendered HTML, and media accepts a next/image element directly.

Set in Geist & Newsreader — animated by the house engineZyncat UI · Rev 0.11 · MIT · Built by Tabsir Ahammed · Source on GitHub