A Threads clone in React Native + Expo: a high-fidelity, interactive recreation of the Threads Android app — real components, real navigation and local state, running in your browser.
DESIGN.md · Design notes · Explore · Run locally · Scope · More apps →
Created to explore how Threads turns a single column of short text posts into a product that feels calm — a near-white canvas, one black ink, a hairline between posts and almost no colour anywhere. For the real experience of the social network itself, explore Threads.
Everything runs locally in your browser; it does not connect to a Threads or Instagram account and loads no live data.
What makes Threads' interface work, and what this recreation had to get right.
One canvas, one ink. The canvas is #FCFCFC rather than pure white, text is a single #000000, and posts are closed by a 1 px #ECECEC hairline instead of a card. In a text-first product the greyscale is the navigation: once posts have their own surface, the column stops reading as one continuous conversation.
Colour is rationed to three places. #0094F4 appears only on the verified disc, #FC3040 only on the inbox's unread dot, #0868E0 only on the login screen's mark. The nearest thing to a highlight anywhere else is the "Trending now" plate at #FAEA4E — one row, in one screen, with its own dark green ink rather than black. Give the feed a brand accent and it stops being a text feed.
Weight is a real stop on the axis, not synthesised bold. The face is variable, so the token set carries 400 / 450 / 500 / 550 / 600 / 700 as genuine stops. That matters at 450: several labels are set lighter than a conventional medium, and reaching for 500 there makes the row read bolder than the design intends. Hierarchy is expressed by weight rather than by another grey.
A clear text column. Feed cards and the composer use a 60 dp text gutter beside the avatar. The detail page has a wider root-text column, with nested replies indented and joined by a thin connector.
The Post button turns itself on. It sits at #E8E8E8 until a segment carries text and then goes black, with no hint text and no prompt. The same is true of "Add to thread". A state change you can see is worth more than a label telling you what to do next.
Supporting lines step down, not sideways. Times, counts and captions are the same type at #989898, and the profile's inactive section tabs step once lighter again to #B3B3B3. The design never reaches for a second hue to make something recede.
The full token set — colours, type scale, spacing, radii and component notes — is in DESIGN.md; the values live in src/tokens.ts.
| Area | Things to try |
|---|---|
| Feed | Scroll the post list and drag down from the top of the feed to pull-to-refresh. |
| Post detail | The first sample card opens its linked sample conversation. Other sample and locally posted cards open their own text and author. Replies, reply drafts, subscription selections and collapsed replies remain associated with their conversation for the page session. |
| Composer | Tap Create. The Post pill starts grey — type anything and watch it turn black. Add to thread appends a second segment and draws the connector between them; once there is text, Cancel asks you to confirm the discard first. |
| Search | Expand the trending rows, type a query, then clear it or leave and return; the expanded list remains. Escape clears a query, then returns to the previous screen. |
| Activity | Switch through All / Follows / Conversations / Mentions. The selected category and a dismissed notification reminder remain when returning to the page. |
| Profile | Switch between Threads, Replies and Reposts to see local posts, replies with their parent conversations, and reposted cards. Dismissed account suggestions remain hidden during the session. The Media tab currently has an empty state. |
| Settings | Switch the six local preferences independently, then leave and reopen Settings. The choices and scroll position remain for the page session. |
| Inbox | Open the Messages tab for the inbox with its two category chips and the empty state below. |
| Sample login | The invisible 22 dp key in the bottom-right corner of the shell opens the sample login screen; pressing it again swaps to the sample account picker. These screens do not authenticate an account. |
- On the feed, scroll down through a few posts, then drag down from the top to refresh.
- Tap the first sample card to read its linked conversation and reply tree, then press the back key. Open another card to see that card's text and author.
- Tap Create, type a sentence, and watch the Post pill go from grey to black.
- Tap Add to thread to add a second segment and see the connector appear.
- Tap Cancel with text still in the composer — a card asks whether to throw the draft away; Cancel keeps it and Discard closes the composer.
- Tap Post — a "Posted" confirmation appears over the feed.
Activity category buttons and Profile section buttons support arrow keys, Home and End to move focus and select. In the main navigation, those keys move focus; Enter or Space activates the button, including Create. After keyboard activation, focus returns to the corresponding navigation button when the new page is ready or the composer closes. Search ignores Ctrl, Meta and Alt Escape and IME composition. The existing photo viewer contains focus, closes with Escape or Back, and returns focus to the exact photo button.
Sample data and edits remain local to the page. Reloading clears local posts, replies, reposts, drafts, follows and other selections. The audience control cycles between two local labels; it does not publish to a real audience. The discard card and action sheets support keyboard focus containment, Escape dismissal and focus return.
Use Node.js 22.13 or newer in the Node.js 22 release line, with npm.
npm ci --ignore-scripts
npm run webOpen the local URL printed by Expo. Dependency installation requires an internet connection. No Threads or Instagram account and no API key are required.
npm run typecheck
npm run build:webThe static output is written to dist/. Serve that directory over HTTP or HTTPS; opening index.html directly as a local file is not supported.
The published demo at https://migrant620.github.io/threads/ is built from this repository. It was last rebuilt and redeployed on 2026-11-06 (GitHub Pages commit 80b82411).
- Partial prototype. This edition includes the feed, its photo viewer and feeds panel, local text details, the linked sample reply tree, the composer and discard card, search, activity categories, profile tabs, the Messages empty state, login screens and a settings surface. Dark theme, editing a profile, creating or editing feeds, quote posting, real sharing and a full audience selector remain unavailable. Several secondary controls have no completed flow.
- Every account, avatar and post is fictional. All handles, bios, post text, counts and avatars are original content written for this study. No real person's post, name, likeness or photograph is reproduced, and the avatars are deliberately abstract so that no real person is depicted.
- Images are original. Post images and avatars were generated for this prototype and are not crops, recolourings or derivatives of anything from the Threads app.
- Session-only interactions. Posting adds local cards and clears the draft. Replies appear only under their parent conversation; the profile lists those replies with their context. Repost counts and profile membership include local cards. No activity is sent to Threads, and no edits survive a page reload. Subscription selections do not schedule or send notifications. Settings switches change only this prototype's local presentation; they do not change an account or operating-system settings. Activity and search selections also reset on reload.
- Icons are redrawn. The app's own icon face is proprietary, so every icon here is an original vector drawing.
- Typeface. The interface face is Instrument Sans under the SIL Open Font License, bundled locally in
assets/fonts/. Numeric strings use Roboto Medium under the SIL Open Font License 1.1. - Mobile layout on the web. The interface is designed for a 393 dp phone column; on wider screens it stays centred rather than stretching.
- Validation scope. The first-batch screens have been checked in Chromium at 393 dp width. This does not establish complete feature coverage, Safari/Firefox compatibility, or native Android/iOS acceptance.
Have an app whose screens you want to put in front of your team, a client or investors? I recreate chosen app interfaces and flows as high-fidelity, interactive prototypes and hand over the source code. Open an issue with the app, the flow you need and your timeline.
The prototype's original code and materials are released under the MIT License. Third-party components, fonts and icons retain their own licenses.
Product names and trademarks belong to their owners; the license covers this prototype's code and original materials, not those marks.
This is an independent prototype by M620, not an official Threads, Instagram or Meta product and not affiliated with or endorsed by Meta Platforms, Inc. Third-party names identify the interface being demonstrated.
Bundled fonts retain their own licenses: Instrument Sans under the SIL Open Font License 1.1, and Roboto Medium under the SIL Open Font License 1.1. See the third-party notices.